Skip to main contentSkip to site searchSkip to component search
Honeycomb

Nav Side

The "nav side" enables users to navigate between links in a vertical format.

In page side navigation items in a vertical format. When it is used inside the navigation element don't forget to provide an accessible label (aria-label) that should be a very short description of the navigation items.

<ul class="flix-nav-side">
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <i class="flix-icon flix-icon-info" aria-hidden="true"></i>
      <span class="flix-nav-side__text">Über Uns</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <span class="flix-nav-side__text">Umwelt</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#" aria-current="page">
      <span class="flix-nav-side__text">Partner</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">Presse</a>
  </li>
</ul>

Active item

For the active item you should add the aria-current attribute to indicates the active item:

  • aria-current="page": for page navigation;
  • aria-current="true": generic current item information.

When using icons, switch to the solid variation.

Notice that the icons have aria-hidden, that's because the navigation items must have a text and that describes each link, so the icons serve only as decoration. Hide them from screen readers to reduce clutter.

<ul class="flix-nav-side">
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#" aria-current="page">
      <i class="flix-icon flix-icon-info-solid" aria-hidden="true"></i>
      <span class="flix-nav-side__text">Über Uns</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <span class="flix-nav-side__text">Umwelt</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <span class="flix-nav-side__text">Partner</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">Presse</a>
  </li>
</ul>

To toggle sub menus you can use a button for the link, this button needs some attention to make the sub menu work in an accessible way:

  • Use a button to allow users to toggle the sub menu using the keyboard;
  • Add the aria-haspopup="menu" attribute to tell screen readers this button toggles a submenu;
  • Add the aria-expanded="true|false" attribute to tell screen readers wether the submenu is open.

You can toggle the menu on and off by switching the aria-expanded value and adding or removing the hidden attribute from the subnav element.

There is no need to remove the elements from the DOM to toggle their visibility as it may harm SEO, the hidden attribute takes care of removing the elements from the tab order and screen reader radar.

<ul class="flix-nav-side">
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <i class="flix-icon flix-icon-info-solid" aria-hidden="true"></i>
      <span class="flix-nav-side__text">Über Uns</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <button class="flix-nav-side__link" aria-expanded="false" aria-haspopup="menu">
      <span class="flix-nav-side__text">Umwelt</span>
    </button>
    <ul class="flix-nav-side-subnav" hidden="">
      <li class="flix-nav-side-subnav__item">
        <a class="flix-nav-side-subnav__link" href="#" aria-current="true">
          <i class="flix-icon flix-icon-phone-tablet-solid" aria-hidden="true"></i>
          <span class="flix-nav-side-subnav__text">Mediathek</span>
        </a>
      </li>
      <li class="flix-nav-side-subnav__item">
        <a class="flix-nav-side-subnav__link" href="#">
          <i class="flix-icon flix-icon-camera" aria-hidden="true"></i>
          <span class="flix-nav-side-subnav__text">Pressemitteilungen</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="flix-nav-side__item">
    <a class="flix-nav-side__link" href="#">
      <span class="flix-nav-side__text">Partner</span>
    </a>
  </li>
  <li class="flix-nav-side__item">
    <button class="flix-nav-side__link" aria-expanded="true" aria-haspopup="menu">
      Presse
    </button>
    <ul class="flix-nav-side-subnav">
      <li class="flix-nav-side-subnav__item">
        <a class="flix-nav-side-subnav__link" href="#" aria-current="true">
          <i class="flix-icon flix-icon-phone-tablet-solid" aria-hidden="true"></i>
          <span class="flix-nav-side-subnav__text">Mediathek</span>
        </a>
      </li>
      <li class="flix-nav-side-subnav__item">
        <a class="flix-nav-side-subnav__link" href="#">
          <i class="flix-icon flix-icon-camera" aria-hidden="true"></i>
          <span class="flix-nav-side-subnav__text">Pressemitteilungen</span>
        </a>
      </li>
    </ul>
  </li>
</ul>