Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.
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.
Note that the ul goes after the a, and not inside of it.
<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>
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.
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 300px;">
<li><a href="#">Item 1</a></li>
<!-- ... -->
</ul>
See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.
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>