@momentum-ui/react-collaboration/scss/components/top-bar/examples/blue.html

Cisco Momentum UI Framework for React Collaboration Applications

<header class="md-top-bar md-top-bar--blue" role="navigation">
  <div class="md-top-bar__container">
    <div class="md-top-bar__brand">
      <a class="md-brand" href="/">
        <div class="md-brand__logo md-brand__logo--pad">
          <!-- Note: use either image or icon, but not both -->
          <!-- img src="/assets/spark-logo.svg" alt="Momentum UI" -->
          <i class="icon icon-cisco-logo"></i>
        </div>
        <div class="md-brand__title">Momentum UI</div>
      </a>
    </div>
    <nav class="md-top-bar__nav ">
      <div class="md-list md-list--horizontal" role="list">
        <a class="md-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="md-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="md-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="md-list-item" role="listItem" href="javascript:void(0)">Navigation</a>
      </div>
    </nav>
    <div class="md-top-bar__right ">
      <!-- Note: conditionally show top-bar__user or top-bar__logged-out -->
       <div class="md-top-bar__user">
         <button class="md-avatar md-button md-button--circle md-button--link">
            CU
         </button>
       </div>
    </div>
  </div>
</header>