# Nav 导航菜单
导航菜单中所有组件中，icon 使用的是 `amosicon` 库，如果需要使用内置 icon 库，则需要按如下方式使用：
```js
// 所有的 NavItem 将使用 `aficon`, 优先级低于自身的 iconPrefix
// IndexNavItem 中的 iconPrefix 仅支持自身设置
```
## 案例演示
### 基本使用: 垂直
---demo
```js
import { Nav, IndexNavItem, NavItem } from 'amos-framework';
ReactDOM.render(
, _react_runner_);
```
---demoend
### 基本使用: 水平
---demo
```js
import { Nav, IndexNavItem, NavItem } from 'amos-framework';
ReactDOM.render(
, _react_runner_);
```
---demoend
### 其它: 设置外链接
---demo
```js
import { Nav, IndexNavItem, NavItem } from 'amos-framework';
ReactDOM.render(
, _react_runner_);
```
---demoend
## Props
### Nav
| params |type |default | description |
|--------- |-------- |---------- |-------- |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 导航内容 |
| href | string | - | 所有 NavItem 的基础 href |
| onItemClick | `function: (navItemProps, event) => {}` | - | 叶子节点 NavItem 点击事件，参数为当前 NavItem 的 props 以及 event 对象 |
| direction | string | - | 方向，默认为垂直，可选值为 `horizontal, vertical` |
| folded | boolean | - | 菜单是否只显示icon |
| dark | boolean | - | 采用黑色背景 |
| iconPrefix | String | `amosicon` | icon prefix 前缀。给所有的 `NavItem` 进行设置 |
### Nav.Item
| params |type |default | description |
|--------- |-------- |---------- |-------- |
| className | string | - | 自定义样式 |
| children | ReactNode | - | 单个菜单内容 |
| index | boolean | - | 是否为首页 |
| href | string | - | 当前菜单 href，非叶子节点也需要指定，与路由对应 |
| onClick | `function: (event) => {}` | - | 指定 NavItem 点击事件，参数为 event 对象。 注意，如果同时设置 `Nav onItemClick` 事件，则两者均会执行 |
| icon | string | - | 菜单图标，参考 Icon 组件 type 属性，为 `amosicon` 图标 |
| iconPrefix | String | `amosicon` | 自定义 icon prefix 前缀。覆盖全局 Nav iconPrefix 设置 |
| title | `string or ReactNode` | - | 菜单标题，支持简单的字符串为内容，或者其他自定义 [菜单内容](#custom title) 等 |
| defaultOpen | boolean | - | 初始化是否展开（不可控），用于非叶子节点 |
| blank | boolean | - | 是否新窗口打开 |
> 注意： 当设置 `href` 外部链接时，需要设置 `NavItem` blank=true。如果不设置 blank 为true ，则会添加默认 host 前缀。如：
> 注意： props 均支持 html 其它属性
```js
```
### custom title
```js
```