The menu
class will transform an element into a flex powered container, best used for vertical navigation menus. The container can contain any combination of the following elements.
menu__title
a section/list headingmenu__list
a collection of itemsmenu__divider
a neat horizontal divider<nav class="menu">
<p class="menu__title">Layout</p>
<ul class="menu__list">
<li><a href="#">Section</a></li>
<li><a href="#">Container</a></li>
<li><a href="#">Grid</a></li>
<li><a href="#">Hero</a></li>
</ul>
<p class="menu__title">Helpers</p>
<ul class="menu__list">
<li class="is-active"><a href="#">General</a></li>
<li><a href="#">Tyography</a></li>
<li><a href="#">Colors</a></li>
</ul>
<p class="menu__title">Form</p>
<ul class="menu__list">
<li><a href="#">General</a></li>
<li><a href="#">Custom Elements</a></li>
</ul>
</nav>
The menu__title
element can be used to label each list within the menu. This can be used with any HTML element but works best when paired with the paragraph HTML element.
<nav class="menu">
<p class="menu__title">List heading</p>
<p class="menu__title">Second list heading</p>
</nav>
The menu__list
class should be applied directly ot a ul
tag to create a menu list element. Use the is-active
modifier on a li
tag to display the currently selected list item.
<nav class="menu">
<ul class="menu__list">
<li class="is-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
Each menu list can contain sublists. Lists can be nested as many times as required.
<nav class="menu">
<ul class="menu__list">
<li>
<a href="#">Item 1</a>
<ul>
<li>
<a href="#">Sublist item 1</a>
<ul>
<li><a href="#">Sub-sublist item 1</a></li>
<li><a href="#">Sub-sublist item 2</a></li>
</ul>
</li>
<li><a href="#">Sublist item 2</a></li>
<li><a href="#">Sublist item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</> Show code
Note if you are creating sublists that only the top level ul
tag requires the menu__list
class.
You can use the is-expandable
modifier on the li
HTML tag to create a sublist that collapses and expands. The sublist will be hidden by default and become visible when the is-active
modifier is toggled. Click the below expandable sublist to preview.
<nav class="menu">
<ul class="menu__list">
<li class="is-expandable is-active">
<a href="#" onclick="this.closest('.is-expandable').classList.toggle('is-active'); return false;">Expandable sublist</a>
<ul>
<li><a href="#">Sublist item 1</a></li>
<li><a href="#">Sublist item 2</a></li>
<li><a href="#">Sublist item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</> Show code
Use the menu__divider
element to separate content with a neat horizontal line.
<nav class="menu">
<p class="menu__title">Layout</p>
<ul class="menu__list">
<li><a href="#">Section</a></li>
<li><a href="#">Container</a></li>
<li><a href="#">Grid</a></li>
<li><a href="#">Hero</a></li>
</ul>
<p class="menu__divider"></p>
<p class="menu__title">Helpers</p>
<ul class="menu__list">
<li class="is-active"><a href="#">General</a></li>
<li><a href="#">Tyography</a></li>
<li><a href="#">Colors</a></li>
</ul>
</nav>
</> Show code The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $menu-title-color | color | lighten($dark-grey, 25%) |
| $menu-title-font-size | units | 0.85rem |
| $menu-title-line-height | unitless | 1.5 |
| $menu-title-padding | padding | 0.5rem 1rem |
| $menu-title-case | string | uppercase |
| $menu-list-color | color | $black |
| $menu-list-line-height | unitless | 1.5 |
| $menu-list-padding | padding | 0.5rem 1.5rem |
| $menu-list-active-background | color | $primary |
| $menu-list-active-color | color | getTextColor($primary) |
| $menu-list-hover | color | rgba(192, 192, 192, 0.09) |
| $menu-divider | border | 1px solid #e9ecef |
| $menu-divider-margin | units | 0.5rem |
| $menu-expandable-border | border | 1px solid #e9ecef |
| $menu-expandable-margin | units | 0.75rem |
| $menu-expandable-padding-left | units | 0.75rem |
| $menu-expandable-item-padding | padding | 0 0.75rem |