5.8 KiB
title | description | video | sass | js |
---|---|---|---|---|
Dropdown Menu | Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin. | KfnRuKBKrbw | scss/components/_dropdown-menu.scss | js/foundation.dropdownMenu.js |
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.
<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.
<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>
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>