Headers provide branding, navigation, search, and access to global application actions such as settings and notifications.

Style

The header is consistent across all pages of an application. This offers a recognizable unifying element to the application.

Branding

Include both your application’s name and logo if available. Clicking on the app’s name or logo should take you to the homepage of the application.

Top Level Navigation

Include top level navigation items. These items should be persistent throughout your experience.

Have a maximum of four items in top-level navigation. For more info, take a look at Navigation.

Typography

Use clear language for top level navigation items. Do not combine icons and text.

If you’re using icons on their own in the header, using tooltips will help users understand what an icon means.

Use Text for navigational items
Do

Use Text for navigational items.

Use Text for navigational items
Not Recommended

Use icons alone for top level navigation items.

Use Text for navigational items
Don't

Use a combination of text and icons for top level navigation items.

Responsive Navigation

Clarity includes functionality for displaying the navigation on smaller devices like tablets and phones with the responsive navigation component in clarity-angular. Details on how to use Clarity's responsive header can be found in our documentation on app navigation.

Search

There are many different ways to include search in the header. Which way you choose depends on search's prominance and its utility within the application.

Use search as a prominent navigation item in the header if you are building a search-based user experience.

Use search in addition to navigation items when you have 2 or 3 top-level navigational items and search continues to be core to your navigation experience.

Use search as a secondary item to the right of the header if search is not core to your navigation experience or if you need to emphasize 3 or more top level navigation items.

You can read more in about search in the design spec. The search component itself is a work in progress.

Right Side Action Area

The area to the right of the header serves as a location for global actions and top-level navigational items that are important yet visited less frequently.

For example, this action area on the right side of the header could include application settings, user settings, help, about, and other similar items.

Code & Examples

The header and subnav support app-level information and navigation links.

.header

.header is a wrapper around the following four sections:

  • Branding
  • Navigation
  • Search
  • Settings
.branding

.branding contains the product logo and the product title. The logo extends the .clr-icon class and the title extends the .title class.

.header-nav

.header-nav contains the navigation links. Each navigation link extends the .nav-link class along with the .nav-text class for text links and the .nav-icon class icon links.

.search is a form containing the search icon and the search input field.

.header-actions

.header-actions is a wrapper that contains secondary navigation links. Each navigation link extends the .nav-link class. Navigation links can be text or icons.

For information about headers with responsive navigation, see Responsive Navigation.

Types

Color Options

.subnav immediately follows the .header. It wraps a tab and an aside section.