# Dropnav

## 通用drop nav

## 案例演示

### Dropnav 基本使用

---demo
```js
import { DropNav } from 'amos-framework';

const dropnavs = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo', subSys: [
    { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'www.baidu.com' }
  ] }
];

ReactDOM.render(<DropNav navs={dropnavs} />, _react_runner_);
```
---demoend

### Dropnav 设置主题：dark

---demo
```js
import { DropNav } from 'amos-framework';

const dropnavs = [
  { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'www.baidu.com', isOutter: true },
  { key: '4', text: '下拉菜单4', icon: 'shuoming', href: '/demo', subSys: [
    { key: '1', text: '跳转至button', icon: 'danwei', href: '/framework/button' },
  { key: '2', text: '跳转至input', icon: 'yichu', href: '/framework/input' },
  { key: '3', text: '外部链接', icon: 'setting', href: 'www.baidu.com' }
  ] }
];

ReactDOM.render((
  <div style={{ background: 'black' }}>
    <DropNav navs={dropnavs} theme="dark" />
  </div>
), _react_runner_);
```
---demoend

## navs 数据格式

```json
[
  {
    "key": "1",
    "label": "菜单1",
    "url|href": "/main/dog",
    "subSys": [
      {"key": "1-1", "label": "菜单1-1", "url|href": "/main/subsys1"},
      {"key": "1-2", "label": "菜单1-2", "url|href": "/main/subsys2"}
    ]
  },
  {
    "key": "2",
    "label": "菜单2",
    "url|href": "/main/cat",
    "children": [
      {"key": "2-1", "label": "子菜单2-1", "url|href": "/main/cat/say"},
      {"key": "2-2", "label": "子菜单2-2", "url|href": "/main/cat/hello"}
    ],
    "subSys": [
      {"key": "sub-1", "label": "子菜单1", "url|href": "/main/subsys3"},
      {"key": "sub-2", "label": "子菜单2", "url|href": "/main/subsys4"},
      {"key": "sub-3", "label": "子菜单3", "url|href": "/main/subsys5"}
    ]
  }
]
```

## options

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-dropnav` | 组件默认clssname prefix |
| navs | array | [] | 菜单nav |
| onClick | function: (navItem, e) => {} | - | 点击菜单回调，或者电子子菜单回调 |
| theme | string | `ligth` | 可选值为`light、dark` |

> navs

注意：菜单文字内容 text与label 二选一，菜单链接 href与url 二选一

shape of:

* key: PropTypes.string.isRequired
* text: PropTypes.string
* label: PropTypes.string
* icon: PropTypes.string
* href: PropTypes.string
* url: PropTypes.string