Navigation bar Stable

The Navigation Bar is the part of the Header that contains the global navigation.

With primary action

<div class="navigation-bar  js-navigation-bar" data-label-more="More…">
  <div class="navigation-bar__container">
    <div class="navigation-bar__panel">
      <div class="navigation-bar__wrapper">
        <button class="navigation-bar__toggle-button">
          <i class="icon-burger"></i>
        </button>
        <div class="navigation-bar__app-identifier">App Identifier</div>
      </div>
    </div>
    <ul class="bare-list navigation-bar__list">
      <li class="navigation-bar__item">
        <a href="#MyDashboard" class="navigation-bar__link">My Dashboard</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#AllEquipment" class="navigation-bar__link">All Equipment</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#OpenServiceTickets" class="navigation-bar__link">Open Service Tickets</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#PlannedActivities" class="navigation-bar__link">Planned Activities</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#Contracts" class="navigation-bar__link">Contracts</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#SystemUpdates" class="navigation-bar__link">System Updates</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#Reporting" class="navigation-bar__link is-active">Reporting</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#CustomerImpersonation" class="navigation-bar__link">Customer Impersonation</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#Administration" class="navigation-bar__link">Administration</a>
      </li>
    </ul>
    <div class="navigation-bar__additional-functions">
      <button class="button button--primary button--small margin-bottom-0">Primary action</button>
    </div>
    </div>
</div>

w/o primary action

<div class="navigation-bar  js-navigation-bar" data-label-more="More…">
  <div class="navigation-bar__container">
    <div class="navigation-bar__panel">
      <div class="navigation-bar__wrapper">
        <button class="navigation-bar__toggle-button">
          <i class="icon-burger"></i>
        </button>
        <div class="navigation-bar__app-identifier">App Identifier</div>
      </div>
    </div>
    <ul class="bare-list navigation-bar__list">
      <li class="navigation-bar__item">
        <a href="#MyDashboard" class="navigation-bar__link is-active">My Dashboard</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#AllEquipment" class="navigation-bar__link">All Equipment</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#OpenServiceTickets" class="navigation-bar__link">Open Service Tickets</a>
      </li>
    </ul>
    </div>
</div>

Dark theme

<div class="navigation-bar navigation-bar--dark js-navigation-bar" data-label-more="More…">
  <div class="navigation-bar__container">
    <div class="navigation-bar__panel">
      <div class="navigation-bar__wrapper">
        <button class="navigation-bar__toggle-button">
          <i class="icon-burger"></i>
        </button>
        <div class="navigation-bar__app-identifier">App Identifier</div>
      </div>
    </div>
    <ul class="bare-list navigation-bar__list">
      <li class="navigation-bar__item">
        <a href="#MyDashboard" class="navigation-bar__link is-active">My Dashboard</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#AllEquipment" class="navigation-bar__link">All Equipment</a>
      </li>
      <li class="navigation-bar__item">
        <a href="#OpenServiceTickets" class="navigation-bar__link">Open Service Tickets</a>
      </li>
    </ul>
    <div class="navigation-bar__additional-functions">
      <button class="button button--primary button--small margin-bottom-0">Primary action</button>
    </div>
    </div>
</div>