Top Nav v1.1.0+

Top Nav is the top navigation menu bar across all breakpoints within the application frame of a HelixUI interface. Use Top Nav to provide access to globally available features, such as account settings, billing, tickets, user management and so on.

Top Navigation

See the snippet below in isolation with the full-page demo. 


<nav id="hxTopNav">
  <div class="hxNavGradient">
    <a class="hxTopNavLogo" href="#">
      <img src="images/helix-logo.svg" alt="Brand Logo" />
    </a>
    <div class="hxTopNavMenu hxTopNavOptionMenu">
      <hx-disclosure aria-controls="topnav-menu-options" aria-expanded="true">
        <span>Select an option</span>
        <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
      </hx-disclosure>
      <hx-menu id="topnav-menu-options">
        <section>
          <hx-menuitem>Option Alpha</hx-menuitem>
          <hx-menuitem>Option Beta Services</hx-menuitem>
          <hx-menuitem>Option Gamma</hx-menuitem>
        </section>
      </hx-menu>
    </div>
    <div class="hxTopNavIconMenu">
      <div>
        <a href="#" @click="notify()">
          <hx-icon type="bell"></hx-icon>
          <p>Notifications</p>
        </a>
        <a href="#" class="selected">
          <hx-icon type="ticketing"></hx-icon>
          <p>Tickets</p>
        </a>
        <a href="#">
          <hx-icon type="support"></hx-icon>
          <p>Support</p>
        </a>
        <a href="#" class="hxDisabled" id="billing">
          <hx-icon type="billing"></hx-icon>
          <p>Billing</p>
          <hx-tooltip for="billing" position="bottom-center">
            You do not have access to this area. Contact an account admin
            in your organization to request access to this item.
          </hx-tooltip>
        </a>
        <a href="#">
          <hx-icon type="account"></hx-icon>
          <p>Account</p>
        </a>
      </div>
      <div class="hxSpacer"></div>
      <div class="hxTopNavMenu">
        <hx-disclosure aria-controls="demo-user-menu" aria-expanded="true">
          <hx-icon class="hxNavUser" type="user"></hx-icon>
          <span>Jane User</span>
          <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
        </hx-disclosure>
        <hx-menu id="demo-user-menu" position="bottom-end">
          <section>
            <header>
              <hx-menuitem class="hxMenuKey">Account Number:</hx-menuitem>
              <hx-menuitem class="hxMenuValue">12345678</hx-menuitem>
            </header>
            <hr class="hxDivider">
            <hx-menuitem class="hxMenuValue">My Profile & Settings</hx-menuitem>
            <hr class="hxDivider">
            <footer>
              <button class="hxBtn">Log Out</button>
            </footer>
          </section>
        </hx-menu>
      </div>
    </div>
  </div>
</nav>

See Also