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 Elements</a></li>
    <li><a href="#">Slider</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 to 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 then 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 className="menu">
  <ul className="menu__list">
    <li className="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.


VariableTypeDefault value
$menu-title-colorcolorlighten($dark-grey, 25%)
$menu-title-font-sizeunits0.85rem
$menu-title-line-heightunitless1.5
$menu-title-paddingpadding0.5rem 1rem
$menu-title-casestringuppercase
$menu-list-colorcolor $black
$menu-list-line-heightunitless1.5
$menu-list-paddingpadding 0.5rem 1.5rem
$menu-list-active-backgroundcolor $primary
$menu-list-active-colorcolorgetTextColor($primary)
$menu-list-hovercolorrgba(192, 192, 192, 0.09)
$menu-dividerborder1px solid #e9ecef
$menu-divider-marginunits0.5rem
$menu-expandable-borderborder1px solid #e9ecef
$menu-expandable-marginunits0.75rem
$menu-expandable-padding-leftunits0.75rem
$menu-expandable-item-paddingpadding0 0.75rem