Composites

Top bar

The Top bar is an to any service adopting this style guide. The Top Bar not only houses critical functionality such as Menu navigation and Help, but also holds a huge amount of the service’s aesthetic weight. All of the potential micro-services/functionality that can occur within the Top Bar has not been fully mapped out but it will follow the philosophy that anything it houses must be universally and persistently relevant to the entire application.

Quick look

There are a few important features the Top Bar that designers and developers should be aware of when adopting it into their service or site:

  1. It's responsive.
  2. The functionality on the right of the bar (help, notifications, etc..) can be omitted (and possible changed) depending on your service's needs.
  3. The Top Bar must be present to adopt the global menu and navigation.

Try it out

You can use the buttons below to add or remove functionality from the Top Bar at the top of this site. You can also resize your browser to see the Top Bar respond to various form factors. Try hovering and focusing the different parts of the Top Bar and hit tab to see the skip link!

Code samples

<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>
    <li role="menuitem" tabindex="-1"><a href="/" tabindex="-1"><img src="/img/deque-logo.svg" alt="Deque"/></a></li>
  </ul>
</div>

For more information on implementation read thewiki.