Navigation

Basics: Menu

The Menu is an all-purpose navigation component. It can be aligned horizontally or vertically, can be nested, and supports icons. Learn more about the Menu.

All menus use the ul > li > a pattern. The markup is a little strict, but this makes it easy to attach a navigation plugin to any menu, as you'll see below.

Here's a basic Menu.

<ul class="menu">
  <li><a href="#">Item One</a></li>
  <li><a href="#">Item Two</a></li>
  <li><a href="#">Item Three</a></li>
</ul>

To nest menus, add a new <ul> inside of an <li>, after the <a> inside.

<ul class="menu">
  <li>
    <a href="#">Item One</a>
    <ul class="menu">
      <li><a href="#">Item One-one</a></li>
    </ul>
  </li>
  <li><a href="#">Item Two</a></li>
  <li><a href="#">Item Three</a></li>
</ul>

Top Bar

Top bar is a simple wrapper around these menu patterns. It supports a left-hand and right-hand section, which collapse on top of each other on small screens. Learn more about the top bar.

Menu Plugins

The basic Menu can be enhanced with one of three Menu plugins. All three use the exact same markup to create a different style of multi-tier navigation.

Dropdown Menu

The dropdown menu plugin (data-dropdown-menu) converts a nested menu into a series of dropdown menus. The nested menus can be opened through hover, click, or keyboard. Learn more about the dropdown menu.

• Item 1
  • Item 1A Loooong
  • Item 1 sub
    • Item 1 subA
    • Item 1 subB
    • Item 1 sub
      • Item 1 subA
      • Item 1 subB
    • Item 1 sub
      • Item 1 subA
      • Item 1 subB

        </ul>
      </li>
      <li><a href="#0">Item 1B</a></li>
    </ul>

    • Item 2
      • Item 2A
      • Item 2B
    • Item 3
      • Item 3A
      • Item 3B
    • Item 4

    ---

    Drilldown Menu

    The drilldown menu plugin (data-drilldown) converts a nested menu into a series of sliding menus. Clicking an item slides the next level menu into view. Learn more about the drilldown menu.

    • Item 1
      • Item 1A
        • Item 1Aa
        • Item 1Ba
        • Item 1Ca
        • Item 1Da
        • Item 1Ea
      • Item 1B
      • Item 1C
      • Item 1D
      • Item 1E
    • Item 2
      • Item 2A
      • Item 2B
      • Item 2C
      • Item 2D
      • Item 2E
    • Item 3
      • Item 3A
      • Item 3B
      • Item 3C
      • Item 3D
      • Item 3E
    • Item 4

    ---

    Accordion Menu

    The accordion menu plugin (data-accordion-menu) converts a nested menu into a series of collapsed accordions. Clicking an item slides down the nested menu. Learn more about the accordion menu.
  • Item 1
    • Item 1A
      • Item 1Ai
      • Item 1Aii
      • Item 1Aiii
    • Item 1B
    • Item 1C
  • Item 2
    • Item 2A
    • Item 2B
  • Item 3