menu navigation

Menu Navigation (side bar)

What is needed?

The menu navigation side bar is where your application's navigation will live. The following is required to use the pattern library's side bar navigation:

• A <ul /> element with the class "dqpl-side-bar" with the following attributes:
  • role="menu"
  • aria-expanded="false"
• Child (of the <ul />) <li /> elements with the following attributes:
  • role="menuitem"
  • tabindex="-1" unless its the initially "active" or "selected" menu item in which tabindex="0" should be applied. If there is no "active" or "selected" state, just make the first <li /> the one with tabindex="0"
• If there are submenus within the side bar the following is needed:
  • An association between parent menu item and submenu, meaning that the <li role="menuitem" /> should have an aria-controls attribute with the value of the submenu's id (see HTML snippet below).
  • Within the <li role="menuitem" /> the following is required:
    • The submenu <ul /> with the class "dqpl-submenu" and the following attributes:
      • role="menu"
      • a unique id (for the parent <li role="menuitem" /> to point to in it's aria-controls attribute)
      • aria-expanded="false"
    • Within this submenu each child menuitem must be:
      • an <li />
      • role="menuitem"
      • tabindex="-1" unless its the initially "active" or "selected" menu item in which tabindex="0" should be applied. If there is no "active" or "selected" state, just make the first <li /> the one with tabindex="0"
• The last thing needed is the scrim (overlay) which is simply a <div /> with the class "dqpl-scrim" and id="dqpl-side-bar-scrim". This should be the next sibling of the side bar.

NOTE: Any anchors within menuitems need tabindex="-1".

NOTE: Only 1 level of submenus is supported. If submenus of submenus is needed, then you can not use the pattern library's menu OR talk with the designer about rethinking the navigation.

NOTE: If your app uses the sidebar, the Top Bar must have a trigger for it (hamburger icon) with aria-controls association.

Example HTML

<ul class="dqpl-side-bar dqpl-main-nav" id="dqpl-side-bar" role="menu" aria-expanded="false">
  <li class="dqpl-branding" role="menuitem" tabindex="0"><a href="/" tabindex="-1">
      <div class="dqpl-logo"><img src="/img/deque-logo-topbar.png" alt="Deque"/></div>
      <div class="dqpl-name">Styleguide</div></a></li>
  <li role="menuitem" tabindex="-1"><a href="/overview" tabindex="-1">Overview</a></li>
  <li role="menuitem" aria-controls="dqpl-components" aria-haspopup="true" tabindex="-1">
    <div class="dqpl-item-text">Components</div>
    <ul class="dqpl-submenu" role="menu" id="dqpl-components" aria-expanded="false">
      <li role="menuitem" tabindex="0"><a href="/components/component-1">Component 1</a></li>
      <li role="menuitem" tabindex="-1"><a href="/components/component-2">Component 2</a></li>
      <li role="menuitem" tabindex="-1"><a href="/components/component-3">Component 3</a></li>
    </ul>
  </li>
  <li role="menuitem" aria-controls="dqpl-composites" aria-haspopup="true" tabindex="-1">
    <div class="dqpl-item-text">Composites</div>
    <ul class="dqpl-submenu" role="menu" id="dqpl-composites" aria-expanded="false">
      <li role="menuitem" tabindex="0"><a href="/composites/top-bar" tabindex="-1">Top bar</a></li>
      <li role="menuitem" tabindex="-1"><a href="/composites/menu-navigation" tabindex="-1">Menu navigation</a></li>
    </ul>
  </li>
</ul>
<div class="dqpl-scrim" id="dqpl-side-bar-scrim"></div>