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