菜单

基本样式

    <ul class="nav nav-menu">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

内容分隔

在菜单上叠加.nav-divider，导航链接用横线分隔。

    <ul class="nav nav-menu nav-box nav-divider">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

分组线

也可在菜单上添加.nav-divider样式的li元素，使链接分组显示。

    <ul class="nav nav-box nav-menu">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="nav-divider"></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

标题

也可在菜单上添加.nav-title样式的li元素，显示为菜单的标题。

    <ul class="nav nav-menu nav-box">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="nav-divider"></li>
      <li class="nav-title">菜单标题</li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>
  

箭头指示

在链接上添加.nav-arrow，右侧显示箭头指示，同时可使文本居左对齐。

    <ul class="nav nav-menu nav-box nav-divider">
      <li class="active"><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li class="disabled"><a href="javascript:;" class="nav-arrow">栏目</a></li>
    </ul>
  

子菜单

    <ul class="nav nav-menu nav-box">
      <li class="drop active">
        <a href="javascript:;" class="nav-arrow">栏目</a>
        <div class="dropdown">
          <ul class="nav nav-menu nav-divider nav-box bg-white">
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
          </ul>
        </div>
      </li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
    </ul>
  

综合应用

分隔线、导航尺寸、子菜单等效果的综合应用。

    <ul class="nav nav-menu nav-box nav-divider nav-big">
      <li class="drop active">
        <a href="javascript:;" class="nav-arrow">栏目</a>
        <div class="dropdown">
          <ul class="nav nav-menu nav-divider nav-box bg-white">
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
          </ul>
        </div>
      </li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
      <li><a href="javascript:;" class="nav-arrow">栏目</a></li>
    </ul>