Docs

Navbar

The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header.

It’s easily extensible and skinnable.

This component can use icons. For more information, check out the icons documentation.

Base

A simple navbar is built with a .joy-navbar container and a .joy-navbar__primary child element .joy-navbar__group child element.

The .joy-navbar__primary element can contain text or an image for a logo. The logo should be places within the .joy-brand--logo element.

Take note of the sturcture of the .joy-navbar__group list. Add a class of .joy-active to .joy-navbar__link elements to give them an active states.

  PRODUCT NAME 
<div class="joy-navbar">
  <div class="joy-navbar__primary">
    <a href="#" class="joy-brand">
      <svg class="joy-brand__svg" viewBox="0 0 79 39" xmlns="http://www.w3.org/2000/svg">
        <path class="joy-brand__svg--path" d="M63 2.1h.7l.6 1.6.6-1.6h.7v2.3H65V2.6l-.6 1.8H64l-.6-1.8v1.8H63V2.1zm-2.4 0h2v.4h-.7v1.9h-.5V2.5h-.7v-.4h-.1zM17.5.7h31l-4.7 7.5h-31L17.5.7zm51.8 37.8L64.6 31H50.9l4.7-7.5h4.3L54.7 15 40 38.5H.8l9.4-15.1H3.3L8 15.9h30.3l-4.7 7.5H19.2l-4.7 7.5h21.4L54.8.7l23.6 37.7h-9.1v.1z"  fill-rule="evenodd"/>
      </svg>
      <span class="joy-brand__separator">
        &nbsp;
      </span>
      <span class="joy-brand__text">
        PRODUCT NAME
      </span>
    </a>
  </div>
  <ul class="joy-navbar__group">
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link ">Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link joy-active">Active Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link">Link</a>
    </li>
    <li class="joy-navbar__item">
      <div class="joy-form-element">
        <div class="joy-form-element__control">
          <input id="sample1" class="joy-input" type="text" placeholder="Search" />
        </div>
      </div>
    </li>
  </ul>
  <div class="joy-navbar__group">
    <div class="joy-navbar__item">
      <a href="#" class="joy-navbar__link joy-navbar__link--account">
        <span>
          <span class="joy-avatar joy-avatar--small joy-avatar--circle">
            <img src="/images/avatar--bd.png" alt="meaningful text">
          </span>
          Account
        </span>
      </a>
    </div>
  </div>
</div>

Responsive Navbar

Use a responsive navbar when you need for a navbar to collapse into a menu on mobile views.

For responsive navbars, add a joy-navbar--responsive class to you main joy-navbar container element. This element should have just two children: joy-navbar__primary and joy-navbar__responsive-content.

joy-navbar__primary, which needs to also have a joy-navbar__primary--responsive modifier class, should contain only the logo/brand and the responsive toggle button, joy-navbar__menu-toggle. This element will only be visible on mobile.

All other links should be contained in the joy-navbar__responsive-content element. These items will be collapsed into an overlay menu on smaller viewports.

Interactions

In order to toggle showing the responsive menu on mobile, the class joy-show-responsive-nav needs to be applied to the body element. This should be applied when the user clicks the joy-navbar__menu-toggle element.

Furthermore, the menu should be closed when the user clicks anywhere that isn't a link or element of the menu (i.e. if the user clicks the menu overlay).

Modifiers

The logo on mobile views can be centered by adding the class joy-navbar__primary--responsive-centered to the joy-navbar__primary element.

The joy-navbar__menu-toggle is positioned to the left by default with the centered modifier, but can be repositioned to the right by adding the modifier joy-navbar__menu-toggle--right to the joy-navbar__menu-toggle element.

Demo

Because of the fixed positioning of responsive navbar on mobile, we can't include a demo on this page, but you can check out a full-page demo here (be sure to resize your browser). Here's the code:

<div class="joy-navbar joy-navbar--responsive joy-m-bottom--x-large">
  <div class="joy-navbar__primary joy-navbar__primary--responsive">
    <a href="#" class="joy-brand">
      <svg class="joy-brand__svg" viewBox="0 0 79 39" xmlns="http://www.w3.org/2000/svg">
        <path class="joy-brand__svg--path" d="M63 2.1h.7l.6 1.6.6-1.6h.7v2.3H65V2.6l-.6 1.8H64l-.6-1.8v1.8H63V2.1zm-2.4 0h2v.4h-.7v1.9h-.5V2.5h-.7v-.4h-.1zM17.5.7h31l-4.7 7.5h-31L17.5.7zm51.8 37.8L64.6 31H50.9l4.7-7.5h4.3L54.7 15 40 38.5H.8l9.4-15.1H3.3L8 15.9h30.3l-4.7 7.5H19.2l-4.7 7.5h21.4L54.8.7l23.6 37.7h-9.1v.1z"  fill-rule="evenodd"/>
      </svg>

      <span class="joy-brand__separator">&nbsp;</span>
      <span class="joy-brand__text">
        PRODUCT NAME
      </span>
    </a>
    <a href="#" class="joy-navbar__menu-toggle joy-navbar--link" data-responsive-nav="toggle"></a>
  </div>
  <div class="joy-navbar__responsive-content" data-responsive-nav="toggle">
    <ul class="joy-navbar__group">
      <li class="joy-navbar__item">
        <a href="#" class="joy-navbar__link">Link</a>
      </li>
      <li class="joy-navbar__item">
        <a href="#" class="joy-navbar__link joy-active">Active Link</a>
      </li>
      <li class="joy-navbar__item">
        <a href="#" class="joy-navbar__link">Link</a>
      </li>
      <li class="joy-navbar__item">
        <div class="joy-form-element">
          <div class="joy-form-element__control">
            <input id="sample1" class="joy-input" type="text" placeholder="Search" />
          </div>
        </div>
      </li>
    </ul>
    <div class="joy-navbar__group">
      <div class="joy-navbar__item">
        <a href="#" class="joy-navbar__link joy-navbar__link--account">
          <span>
            <span class="joy-avatar joy-avatar--small joy-avatar--circle">
              <img src="/images/avatar--bd.png" alt="meaningful text">
            </span>
            Account
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

Component Styles

See component styles for a list of all available themes.

  PRODUCT NAME 
<div class="joy-navbar joy-theme--alt-inverse">
  <div class="joy-navbar__primary">
    <a href="#" class="joy-brand">
      <svg class="joy-brand__svg" viewBox="0 0 79 39" xmlns="http://www.w3.org/2000/svg">
        <path class="joy-brand__svg--path" d="M63 2.1h.7l.6 1.6.6-1.6h.7v2.3H65V2.6l-.6 1.8H64l-.6-1.8v1.8H63V2.1zm-2.4 0h2v.4h-.7v1.9h-.5V2.5h-.7v-.4h-.1zM17.5.7h31l-4.7 7.5h-31L17.5.7zm51.8 37.8L64.6 31H50.9l4.7-7.5h4.3L54.7 15 40 38.5H.8l9.4-15.1H3.3L8 15.9h30.3l-4.7 7.5H19.2l-4.7 7.5h21.4L54.8.7l23.6 37.7h-9.1v.1z"  fill-rule="evenodd"/>
      </svg>
      <span class="joy-brand__separator">
        &nbsp;
      </span>
      <span class="joy-brand__text">
        PRODUCT NAME
      </span>
    </a>
  </div>
  <ul class="joy-navbar__group">
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link ">Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link joy-active">Active Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link">Link</a>
    </li>
    <li class="joy-navbar__item">
      <div class="joy-form-element">
        <div class="joy-form-element__control">
          <input id="sample1" class="joy-input" type="text" placeholder="Search" />
        </div>
      </div>
    </li>
  </ul>
  <div class="joy-navbar__group">
    <div class="joy-navbar__item">
      <a href="#" class="joy-navbar__link joy-navbar__link--account">
        <span>
          <span class="joy-avatar joy-avatar--small joy-avatar--circle">
            <img src="/images/avatar--bd.png" alt="meaningful text">
          </span>
          Account
        </span>
      </a>
    </div>
  </div>
</div>