Header Bar

Components

The header bar is an essential part of every user interface. It consist of multiple components and can be used in many variations.

Product Icon

The product icon is the only obligatory part of the header. It is always positioned to the left. A click on the product icon leads users to the main page or dashboard.

The menu items build the top-level navigation of the whole application. The menu items contain mostly simple links. The currently selected item is displayed in black. Menu items can also contain other components, like buttons. It is important though to keep the menu simple. Do not overcomplicate it.

Search Bar

A search bar allows users to search for content within the application. It should always show results corresponding to the whole application, not just to the currently selected section. You can also hide the search bar beneath a search icon that expands when clicked. This icon will be displayed in the utilities.

Utilities

Utilities are a row of system-level actions or information. They are oriented towards the right side of the header bar.

Account and Further Actions

On the rightmost side, the user’s account is displayed. This is done either by an avatar or by the name of the current user. When users click on the avatar/name, they can see further actions and settings connected to the user. If you want to hide settings that are unrelated to the user, don’t hide them beneath the avatar/name. Hide them beneath the ‘settings’ icon that you position within the utilities instead.

Variants

Dark Header Bar

Headers can either be light or dark. Light headers appear more lightweight and are blending with the app’s content. Dark headers appear more separated from the app’s content. Choose them according to how much separation you want.

Small Header Bar

Both light and dark headers are available in a smaller size variant. Instead of a height of 64 pixels, the smaller variant has a height of 48 pixels.

Separation Between Header Bar and Content Area

For light headers, you can separate the header and the content area by adding a shadow, by adding a separating line, or by just using spacing.

Scrolling Behaviour

Headers can either always stay fixed at the top of the page or disappear on scrolling. If your users often interact with the header, then it is usually better to use a fixed header. (Contentsquare, The 3 Golden Rules of Sticky Menu Navigation)

Content

Keep your utilities simple. Only include the most important commands in your header. Hide less important utilities beneath the ‘settings’ icon or, if the utility is related to the user, beneath the avatar.

Examine the layout of existing applications that use RingUI, like YouTrack, TeamCity, or Qodana. If your application contains elements that other applications have too, copy their position. This consistency will help users to quickly find the content they are looking for. (NNGroup, Maintain Consistency and Adhere to Standards)

For narrow screens, you can hide the rightmost menu items beneath the ‘more’ text or even hide all menu items beneath the ‘burger’ icon. Only do this if you don’t have enough space to display the items normally.