Skip to main content Skip to navigation Skip to search

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

Usage

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

Anatomy

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.

If you’re using icons on their own in the header, using tooltips will help users understand what an icon means. Use clear language for top level navigation items. Do not combine icons and text. Only use a combination of text and icons when the provided text gives additional context specific to the user, for example, the user's username.

Use Text for navigational items.

Don't use icons alone or mix icons and text for top level navigation items.

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.

Behavior

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.

There are many different ways to include search in the header. Which way you choose depends on search's prominence 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 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.

Code & Examples

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

Basics

.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 .cds-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

.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.

Info

Types

Color Options

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