# 导航菜单 Menu

用于承载网站的架构，并提供跳转的菜单列表。

### 顶部导航

#### 单层导航

只存在单层结构的顶部导航，点击即跳转。可在承载单一产品或单一业务线等层级结构简单的网站使用。

![顶部导航-单层导航](https://tdesign.gtimg.com/site/design/images/顶部导航-单层导航.jpg)

#### 双层导航

顶部导航可承载 2 级页面导航，每个一级下的二级页面数量少于 12 个，平铺展示以便定位及查找。常用于聚焦单个业务线下的二级页面导航。

![顶部导航-双层导航](https://tdesign.gtimg.com/site/design/images/顶部导航-双层导航.jpg)

#### 多层收纳导航

顶部导航下拉菜单收纳 2-3 级页面导航，可拓展分组展示，常用于多种业务下的快速切换导航。

![顶部导航-多层收纳导航](https://tdesign.gtimg.com/site/design/images/顶部导航-多层收纳导航.jpg)

#### 可自定义顶部导航

可在原有导航上面加入自定义的功能。在具有复杂逻辑或有特定诉求的业务场景使用。

![顶部导航-可自定义顶部导航](https://tdesign.gtimg.com/site/design/images/顶部导航-可自定义顶部导航-1824153.jpg)

### 侧边导航

#### 单层导航

只存在单层结构的侧边导航，点击即跳转。一般与单层顶部导航相结合，作为二级页面的侧边导航。

![侧边导航-单层导航](https://tdesign.gtimg.com/site/design/images/侧边导航-单层导航.jpg)

#### 平铺式侧边导航

侧边导航可承载 1-3 级页面导航，并平铺展示。适用于层级较深，但每个层级内页面不多（5 个以下）的网站，如结合单层顶部导航可承载最深四级页面。

![侧边导航-平铺式侧边导航](https://tdesign.gtimg.com/site/design/images/侧边导航-平铺式侧边导航.jpg)

#### 弹层式侧边导航

侧边导航可承载 1-3 级页面导航，并采用弹层来收纳深层页面导航。适用于架构层级较深，且每层的页面较多，需要对大量页面进行收纳。

![侧边导航-弹层式侧边导航](https://tdesign.gtimg.com/site/design/images/侧边导航-弹层式侧边导航.jpg)

#### 可分租的侧边导航

针对大量页面进行分组展示，以方便用户理解及查找。一般在大量业务或者页面需要展示的网站使用，并且因为展示内容更多需要对业务进行归类。

![侧边导航-带分类的侧边导航](https://tdesign.gtimg.com/site/design/images/侧边导航-带分类的侧边导航-1824220.jpg)

#### 可自定义侧边导航

可在原有导航上面加入自定义的功能。适用于复杂逻辑或有特定诉求的业务场景。

![侧边导航-可自定义侧边导航](https://tdesign.gtimg.com/site/design/images/侧边导航-可自定义侧边导航-1824524.jpg)

#### 可收起的侧边导航

在侧边导航上提供收集按钮，点击后可以将侧边栏最小化，常见于带有图标的侧边导航。

demo

## 组件设计指南

### 何时使用

导航菜单是整个网站的必要元素，可根据业务场景使用不同的导航样式和布局；

### 与页面布局相关

##### 导航栏的对齐布局方式可参考【[布局 Layout](./layout)】。

### 推荐/慎用示例

##### 当侧边导航菜单过多时，可将菜单分层级显示，避免内容过多无法在一屏显示完整。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E5%AF%BC%E8%88%AA-----------1@2x.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E5%AF%BC%E8%88%AA-----------2@2x.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>
