Navigation top bar
The top bar, also known as a header, displays navigation and actions relating to the interface.
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.
- Do not hide the top bar when scrolling.
- Do not change the colour of the top bar.
- Do not add the
Logoin the top bar.
- Do not add imagery in the top bar.
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
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 are allowed with nested menus
- Search bars
- Buttons as menus
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
Menufor the user to see their notifications.
- Accessibility: This opens a
Menuwith choices for the users to choose light/dark mode and their font size. This button is mandatory to keep.
- User profile: This opens a
Menuwhere the user can see more account details and log out. This button is mandatory to keep.