---
title: Menu 导航菜单
order: 22
group:
path: /components
nav:
title: 组件
path: /components
---
## TODO
设计师确认 `Menu` 的基本样式
Menu Icon 的默认颜色
## 使用
通过设置 `mode` 为 `horizontal`、`vertical`(默认)、`inline` 来显示导航菜单的类型
### 基本使用
```jsx
import React from 'react';
import { Menu, Icons } from 'quanta-design';
const { MailIcon, RmbIcon, EditIcon, DataBoxIcon } = Icons;
export default () => (
);
```
### 顶部导航栏
```jsx
import React from 'react';
import { Menu, Icons } from 'quanta-design';
const { MailIcon, RmbIcon, EditIcon, DataBoxIcon } = Icons;
export default () => (
);
```
### 侧边导航栏
```jsx
import React from 'react';
import { Menu, Icons } from 'quanta-design';
const { SubMenu } = Menu;
const { MailIcon, RmbIcon, EditIcon, DataBoxIcon } = Icons;
export default () => (
);
```