My Digital Buildings

Dropdown Menu

Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.

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

Note that the <ul> goes after the <a>, and not inside of it.

edit on codepen button
<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>

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.

Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a max-width on the menu.

edit on codepen button
<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>

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>