---
title: Menu 导航菜单
order: 22
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

设计师确认 `Menu` 的基本样式

## 使用

通过设置 `mode` 为 `horizontal`、`vertical`(默认)、`inline` 来显示导航菜单的类型

### 基本使用

```jsx
import React from 'react';
import { Menu, Icons } from 'baas-ui';

const { MailIcon, RmbIcon, EditIcon, DataBoxIcon } = Icons;

export default () => (
  <Menu defaultSelectedKeys={['message']}>
    <Menu.Item key="message" icon={<MailIcon fill="currentColor" />}>
      站内信
    </Menu.Item>
    <Menu.Item key="fee" icon={<RmbIcon fill="currentColor" />}>
      费用中心
    </Menu.Item>
    <Menu.Item key="workorder" icon={<DataBoxIcon fill="currentColor" />}>
      工单
    </Menu.Item>
    <Menu.Item key="docs" icon={<EditIcon fill="currentColor" />}>
      文档与支持
    </Menu.Item>
  </Menu>
);
```

### 顶部导航栏

```jsx
import React from 'react';
import { Menu, Icons } from 'baas-ui';

const { MailIcon, RmbIcon, EditIcon, DataBoxIcon } = Icons;

export default () => (
  <Menu mode="horizontal" defaultSelectedKeys={['message']}>
    <Menu.Item key="message" icon={<MailIcon fill="currentColor" />}>
      站内信
    </Menu.Item>
    <Menu.Item key="fee" icon={<RmbIcon fill="currentColor" />}>
      费用中心
    </Menu.Item>
    <Menu.Item key="workorder" icon={<DataBoxIcon fill="currentColor" />}>
      工单
    </Menu.Item>
    <Menu.Item key="docs" icon={<EditIcon fill="currentColor" />}>
      文档与支持
    </Menu.Item>
  </Menu>
);
```

### 侧边导航栏