Dropdown Menu

Horizontal

Dropdown menus build on the Menu component's syntax. Add the class .dropdown and the attribute data-dropdown-menu to the menu container to set up the dropdown.

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

To create dropdown menus, nest a new <ul> inside an <li>. You can nest further to create more levels of dropdowns.

Watch this part in video

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

• Item 1
  • Item 1A
  • Item 1B
    • Item 1B i
    • Item 1B ii
    • Item 1B iii
      • Item 1B iii alpha
      • Item 1B iii omega
    • Item 1B iv
      • Item 1B iv alpha
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
• Item 3
• Item 4

Vertical

Add the .vertical class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.

<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <!-- ... -->
</ul>

• Item 1
  • Item 1A
  • Item 1B
    • Item 1B i
    • Item 1B ii
    • Item 1B iii
      • Item 1B iii alpha
      • Item 1B iii omega
    • Item 1B iv
      • Item 1B iv alpha
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
• Item 3
• Item 4

Sticky Navigation

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

Preventing FOUC

Before the JavaScript on your page loads, the dropdown menus will not have arrows. However, once the JavaScript file has loaded, the arrows will appear causing a flash of unstyled content. You can prevent this by adding the .is-dropdown-submenu-parent class manually.

<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

var elem = new Foundation.DropdownMenu(element, options);

$('#element').foundation('_destroy');