App header

The app header is the primary UI element, positioned as the top bar of the application of the layout. It can contain breadcrumb, profile details, or a search bar within.




Figma component

Includes a link to a Figma component that has been imported to Supernova


Use when

  1. setting the page-level layout if the product has complex navigations
  2. creating a responsive navigational structure within your product.
  3. it needed the show navigational directions (breadcrumb) or user details.

Don't use when

  1. side navigation is not in use on the layout.


  1. Breadcrumb
  2. User credentials area



The app header is always positioned at the top of the layout, providing consistent visibility across all pages within the application.


The app header is responsive and should adjust dynamically to accommodate changes in screen size and orientation. In usage with side navigation, please avoid two components overlapping.

Component usage


The breadcrumb displays the hierarchical navigation path of the current page within the application.

User credentials

The user credentials area provides information about the currently logged-in users, such as their name, profile picture (avatar), and company information. This area includes options for account settings within.

Search bar (WIP)



The app header should remain fixed at the top of the screen during vertical scrolling, ensuring continuous access to navigation and user information.

Responsiveness (Nesting actions)

When the screen width decreases, the breadcrumb and user credentials components in the top header are affected. If there are multiple breadcrumb trails, intermediate pages are truncated in the overflow menu. You can find more details on the component's page.

Also, the user credentials section can be integrated with an avatar, so if the name is displayed when the screen width decreases, such information can be included in the overflow menu. This situation should be considered according to the responsive values ​​ in the related product.

The components in the top header maintain their positions unchanged during width changes. For example, the breadcrumb is always aligned to the left, and the user credentials area is always aligned to the right.