top bar

Harris Schneiderman edited this page Jun 9, 2017 · 2 revisions

Top Bar

The top bar is the one and only essential composite in using the pattern library meaning all adaptations of the pattern library require the top bar to be used.

A child of the top bar is the landmarks menu with skip links. Skip Links' Documentation

What is needed?

  • A <div /> wrapper with the "dqpl-top-bar" class
  • Within the wrapper a <ul /> with role="menubar" with menuitem children:
    • <li /> with the following attributes:
      • role="menuitem"
      • First item should have tabindex="0" and the rest should havetabindex="-1". NOTE: if the application uses the sidebar, the first item in the topbar should be the hamburger trigger for the sidebar (with aria-controls pointing to the id of the sidebar)

NOTE: All anchors within topbar menuitems, should have tabindex="-1".

NOTE: If right aligned items are desired, the "dqpl-right-aligned" class should be added to the left-most right aligned item.

Example HTML

<div class="dqpl-top-bar">
  <ul role="menubar">
    <li class="dqpl-menu-trigger" role="menuitem" tabindex="0" aria-label="Menu" aria-controls="dqpl-side-bar" aria-haspopup="true">
      <div class="fa fa-bars" role="presentation" aria-hidden="true"></div>
    <li role="menuitem" tabindex="-1"><a href="/" tabindex="-1"><img src="/img/deque-logo-topbar.png" alt="Deque"/></a></li>
    <li class="interactive-item dqpl-right-aligned" role="menuitem" tabindex="-1">
      <div class="dqpl-offscreen">Browser</div>
      <div class="icon-overlap">
        <div class="fa fa-circle-thin" role="presentation" aria-hidden="true">
        <div class="fa fa-check" role="presentation" aria-hidden="true"></div>
      <div class="browser-status-text">Connected</div>
    <li class="interactive-item" role="menuitem" tabindex="-1" aria-label="Help">
      <div class="fa fa-question-circle" aria-hidden="true" role="presentation"></div>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.