Navigation top bar

The top bar, also known as a header, displays navigation and actions relating to the interface.

Guidelines

Top bars span the full width of the viewport and are always the topmost component on a page. The top bar does not scroll away, being a consistent guidepost to users.

🙈Ops! Can't find the image, but you could still try Figma.

Don't

• Do not hide the top bar when scrolling.
• Do not change the colour of the top bar.
• Do not add the Logo in the top bar.
• Do not add imagery in the top bar.

Sections

Title and navigation

The top bar always has a title which is the same throughout the whole application group. A subtitle is allowed, this can be the same throughout the whole application group, or can be specific to sub-apps within the application.

The top bar has one optional main navigational icon button which is always to the far left. This icon can either open the App launcher or toggle the Navigation Drawer.

Center custom content

The center block of the top bar can either be left empty, or custom content can be inserted into the placeholder.

Custom content allowed:

• Tabs
  • Tabs are allowed with nested menus
• Search bars
• Buttons as menus

Actions

The actions on the far-right are standard. This area is for the following common actions within the application:

• Fullscreen: Users can choose to launch the interface to be fullscreen.
• Notifications: This opens a Menu for the user to see their notifications.
• Accessibility: This opens a Menu with choices for the users to choose light/dark mode and their font size. This button is mandatory to keep.
• User profile: This opens a Menu where the user can see more account details and log out. This button is mandatory to keep.

Demo

Title and actions

Title with icon, search and text