Overview

The navbar or the app header provides context through globally accessible menu options and positions a consistent component to connect various Trimble applications and contains the main navigation for your application.

<nav class="navbar nav navbar-expand-sm modus-header">
  <button class="btn btn-lg btn-icon-only" id="menuButton" data-modus-item="menu-btn" href="#overview" data-toggle="#" type="button">
    <i class="modus-icons">menu</i>
  </button>
  <a href="#navbar-example" class="navbar-brand mr-auto ml-2">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-logo.svg" width="107" height="25" class="img-fluid d-none d-sm-block" alt="home">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-icon.svg" class="d-block d-sm-none" height="25" width="25" alt="home">
  </a>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Notifications">
        <i class="modus-icon material-icons">notifications</i>
      </button>
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Help">
        <i class="modus-icons">help</i>
      </button>
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Applications">
        <i class="modus-icons">apps</i>
      </button>
    </div>
  </div>
  <button type="button" class="btn btn-lg btn-icon-only d-block d-sm-none">
    <i class="modus-icons">more_vertical</i>
  </button>
  <button type="button" class="btn btn-lg btn-icon-only bg-transparent border-white ml-2 border-0"
         data-toggle="tooltip" data-placement="bottom" data-html="true"
         title="<div class=text-left>MyTrimble<br>Stephanie Carter<br>stephanie_carter@example.com</div>">
         <i class="modus-icon material-icons rounded-circle">account_circle</i>
  </button>
</nav>

Blue Variant

An alternative blue variant is available. Add the classes navbar-blue to the navbar and add text-white to the icons.

<nav class="navbar navbar-blue nav navbar-expand-sm modus-header py-1">
  <button class="btn btn-lg btn-icon-only id="menuButton" data-modus-item="menu-btn" href="#overview" data-toggle="#" type="button">
    <i class="modus-icons">menu</i>
  </button>
  <a href="#navbar-example" class="navbar-brand mr-auto ml-2">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-logo-rev.svg" width="107" height="25" class="img-fluid d-none d-sm-block" alt="home">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-icon-rev.svg" class="d-block d-sm-none" height="25" width="25" alt="home">
  </a>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Notifications">
        <i class="modus-icon material-icons">notifications</i>
      </button>
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Help">
        <i class="modus-icons">help</i>
      </button>
      <button type="button" class="btn btn-lg btn-icon-only ml-2" data-toggle="tooltip"
         data-placement="bottom" title="Applications">
        <i class="modus-icons">apps</i>
      </button>
    </div>
  </div>
  <button type="button" class="btn btn-lg btn-icon-only d-block d-sm-none">
    <i class="modus-icons">more_vertical</i>
  </button>
  <button type="button" class="btn btn-lg btn-icon-only bg-transparent ml-2"
         data-toggle="tooltip" data-placement="bottom" data-html="true"
         title="<div class=text-left>MyTrimble<br>Stephanie Carter<br>stephanie_carter@example.com</div>">
         <i class="modus-icon material-icons rounded-circle">account_circle</i>
  </button>
</nav>