Skip to content

Overview

The Sidebar Menu is used as a navigational menu on the left hand side of an application.

Edit this section

Usage

The Sidebar Menu, mostly used in sidebars, is a more airy version of the Accordion Menu.

Principles

The Sidebar Menu follows the same hierarchical design structure as the Accordion Menu.

Edit this section

Behaviours

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Accessibility

Remember to use the correct role, aria- and html-attributes for the menu options.

<nav class="if sidebar-menu" tabindex="-1" role="menu" aria-label="Sidebar Menu" id="menu-0123">
  <ul class="if">
    <li class="if">
      <a href="/layout" tabindex="-1" role="menuitem" class="if" type="button">Layout</a>
    </li>
  </ul>
</nav>
Edit this section

Implementation

<nav class="if sidebar-menu">
  <ul class="if">
    <li class="if is-parent is-active">
      <a tabindex="-1" role="menuitem" href="#" class="if">Level 1</a>
      <div class="if sidebar-menu is-open">
        <ul class="if is-open"><li class="if">
            <a tabindex="-1" role="menuitem" href="#" class="if">
              Level 2
            </a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
Edit this section

Contact us