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 tag.

<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

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

CSS variables

You can customize the menu elements using the following CSS variables.

.menu__title {
  --font-color: hsl(0deg, 0%, 63%, 1);
  --font-size: 0.85rem;
  --line-height: 1.5;
  --padding: 0.5rem 1rem;
  --case: uppercase;
}

.menu__list {
  --background-color: transparent;
  --font-color: var(--color-black);
  --active-background-color: var(--color-primary);
  --active-font-color: var(--color-primary-text);
  --hover-background-color: hsl(0deg, 0%, 75%, 0.09);
  --hover-font-color: var(--color-black);
  --item-padding: 0.5rem 1.5rem;
  --line-height: 1.5;
}

.menu__list li.is-expandable {
  --expandable-item-padding: 0 0.75rem;
  --border-color: hsl(210deg, 16%, 92%, 1);
  --border-width: 1px;
  --padding-left: 0.75rem;
  --margin: 0.75rem;
}

.menu__divider {
  --border-width: 1px;
  --border-color: hsl(210deg, 15.7894736842%, 92.5490196078%, 1);
  --margin: 0.5rem;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.