Skip to content

导航

基础用法

使用组件类 .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-steps

垂直排列

使用修饰类 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导航标题字体颜色