Menu

A simple vertical navigation menu

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 heading
  • menu__list a collection of items
  • menu__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>
Copy

Elements

Title

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>
Copy

List

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>
Copy

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 
Copy

Note if you are creating sublists that only the top level ul tag requires the menu__list class.

Expandable list

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 
Copy

Divider

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 
Copy

Variables

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