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

Cisco Momentum UI Framework for React Collaboration Applications

<header class="md-top-bar md-top-bar--light" 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">
          <a href="javascript:void(0)">My Apps</a>
         <div class="md-avatar" tabindex="0" aria-haspopup="true">
            <img class="user-image" src="https://randomuser.me/api/portraits/men/85.jpg" />
         </div>
       </div>
       <!-- div class="md-top-bar__logged-out">
          <a href="javascript:void(0)">Log In</a>
          <button class="md-button md-button--blue">Button</button>
       </div -->
    </div>
    <i class="md-top-bar__mobile-menu-button icon icon-list-menu_20"></i>
    <div class="md-top-bar__mobile md-tb-mobile">
      <i class="icon icon-cancel_20"></i>
        <div class="md-top-bar__brand">
          <a class="md-brand" href="/">
            <div class="md-brand__logo">
              <img src="/assets/spark-logo.svg">
            </div>
            <div class="md-brand__title">Momentum UI</div>
          </a>
        </div>
      <div class="md-list-separator"></div>
      <nav class="md-tb-mobile__nav" role="navigation">
        <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 class="md-list-separator"></div>
        <a class="md-list-item" role="listItem" href="javascript:void(0)">Sign out</a>
      </nav>
    </div>
    <div class="md-tb-mobile__mask" role="none"></div>
  </div>
</header>