导航

基础用法

使用组件类 .nav 来获得导航外观通常搭配 <ul>、<menu> 和 <li> 标签来使用。

带标题的导航

可以通过 CSS 类 nav-heading 给导航项设置标题样式。

导航标题

html

<menu class="nav">
  <li class="nav-heading">导航标题</li>
  ...
</menu>

导航样式

除了默认样式，还可以通过修饰类为导航应用不同的样式。

主要导航 `.nav-primary`

主要导航

次要导航 `.nav-secondary`

次要导航

圆点导航 `.nav-pills`

圆点导航

标签导航 `.nav-tabs`

标签导航

垂直排列

使用修饰类 nav-stacked 使导航获得垂直排列样式，可搭配其他各种样式的导航使用。

.nav-primary

主要导航

.nav-secondary

次要导航

.nav-pills

圆点导航

.nav-tabs

标签导航

自适应宽度的导航

使用修饰类 nav-justified 使导航获得自适应宽度样式，可搭配其他各种样式的导航使用。

提示

自适应宽度修饰类不能和垂直排列修饰类混用。

CSS 类

导航提供了如下 CSS 类

类	类型	作用
`nav`	实体类	元素导航组件
`nav-item`	实体类	元素导航条目组件
`nav-heading`	实体类	导航标题组件
`nav-divider`	实体类	导航分割线组件
`active`	修饰类	为导航元素启用选中态样式
`nav-simple`	修饰类	为导航元素启用简单样式
`nav-primary`	修饰类	为导航元素启用主要导航样式
`nav-secondary`	修饰类	为导航元素启用次要导航样式
`nav-tabs`	修饰类	为导航元素启用标签风格导航样式
`nav-pills`	修饰类	为导航元素启用标签风格导航样式
`nav-stacked`	修饰类	为导航元素启用垂直排列导航样式
`nav-justified`	修饰类	为导航元素启用自适应宽度导航样式

CSS 变量

变量名称	变量含义
--nav-heading-color	导航标题字体颜色