Header

A header tells users where they currently are within the site or application. It also provides navigation access to other areas of the interface.

• Interactive Playground
• Anatomy
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various avatar styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="playground-topnav">
  <nav class="neo-navbar">
    <div class="neo-nav--left">
      <img
        alt
        class="neo-img neo-img--fluid"
        src="/_astro/logo-fpo.DrDRKm-U.png"
      >
    </div>
    <div class="neo-nav">
      <div class="neo-badge__navbutton">
        <button
          class="neo-badge__navbutton--content neo-btn neo-icon-notifications-on"
          aria-label="notifications"
        >
        </button>
      </div>
      <div class="neo-badge__navbutton">
        <button
          class="neo-badge__navbutton--content neo-btn neo-icon-settings"
          aria-label="Settings"
        >
        </button>
      </div>
      <div id="the-avatar">
        <figure
          class="neo-avatar"
          data-initials="MD"
        >
        </figure>
      </div>
    </div>
    <div class="neo-nav--right">
    </div>
  </nav>
</div>

<div className="playground-topnav">
  <TopNav
    aria-label="Main header"
    logo={<Image isDecorativeOrBranding src="/_astro/logo-fpo.DrDRKm-U.png"/>}
  >
    <React.Fragment key=".$the-actions">
      <TopNavIconButton
        aria-label="notifications"
        icon="notifications-on"
      />
      <TopNavIconButton
        aria-label="Settings"
        icon="settings"
      />
      <div id="the-avatar">
        <RA avatar={<Avatar initials="MD" />} />
      </div>
    </React.Fragment>
  </TopNav>
</div>

The header is made up of multiple actionable items.

• Company Logo:

  This identifies company that made the application. Selecting the logo will take the user to the main page of the application.

• Product Name:

  The application is named here. If the user has more than one application open, this tells them which one they are viewing. Selecting the application name will return the user to the main page of the application.

• Search:

  A text entry field that helps user to find a specific location within the application.

• Utility Items:

  A generic container that can hold any action items related to the program from the current location.

• Avatar:

  When a user logs into the program, their account picture (or their initials when the is no picture) is shown here.

There are many different behaviors a header can have.

Placement

Headers are fixed at the top of the application window. No other items or windows are permitted above the header.

Brand and Product Name

The company logo and the product name are located at the left end of the header. Clicking the logo and the product name will return the user to the main page of the application.

DO: Place the company name and product name fields on the left side of the header.

DON'T: Do not use the left side just for placing navigation items.

Profile and Status

The user’s profile and current status (where applicable) is positioned at the end of the right side of the header with the avatar. The status is used when an agent is connected and ready to interact with a customer.

Avatar

Agent State

Search

The search field should be positioned to the left of the utility items and the avatar. The search field is expanded by default on larger screens.

Responsiveness

Items on the header wil be condensed on smaller browser sizes. Action items and controls will be combined under an ellipsis menu (...). Tabs are collapsed under a dropdown menu. The search icon will be reduced to a magnifying icon until selected.

A header that includes a collapsible side navigation can be accessed by clicking the hamburger menu to the left of the company logo. Clicking on the hamburger menu opens the side navigation pane.

DO: Use the responsive menu button to access the side navigation pane on smaller screen sizes.

DON'T: Do not use a custom action to access the side navigation bar.

The search feature collapses into a magnifier icon. When selected, the search bar returns to full size and overlays the header.

Skip Navigation

Skip navigations are used to jump to other sections of the page so the user doesn’t have to cycle through every focusable item to find the one they want.

Shown below are the specifications for the header component.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.