Composites

Menu navigation

The menu navigation is the primary mechanism for users traversing the application/service they are in, accessing their account information or signing out. It is fully responsive and always present when the browser is sized > 1024 and accessible through a menu trigger in the upper-left corner when the browser is sized < 1024.

Quick look

The menu is broken up into (3) sections:

  1. Context slip

    The context slip sits at the very top of the menu. It is either extremely simple, such as the one for this style guide or more complex, such as the ones you’d find on a product like Assure. The simple context slip only has a logo and the name of the service you are on. Clicking on it will return you to the site’s home page. The complex context slip will display information about the user logged in and possibly their avatar. Clicking on it will take you to their account page.

  2. Areas and sub areas

    The menu navigation can have up to (2) tiers: navigation and subnav. Clicking a navigation area which has no subnav will take you directly there. Clicking a navigation area which has 1 or more subnav areas will open the subnav areas and put the focus on the first item in that section. There are no landing pages for areas parents with child areas. If you area in a smaller form factor, expand an area and navigate to it, it will automatically close the menu. Don’t worry though as the area you expanded will stay expanded even after you reopen the menu.

  3. Sign out

    Sign out will always be located center-aligned at the bottom of the menu.

Try it out

The navigation you see to the left is also the navigation for this site! Try opening and closing each area, hovering and tabbing through. You can click the button below to change the context slip to see what it would look like for a product.

Context slip

Code samples

<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.svg" 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>

For more information on implementation read thewiki.