Navigation menu
The navigation menu offer quick access to the main pages in the application including and optional search box. The list can include nested entries that can be expanded in the menu. In the lover corner of the navigation menu is access to application settings and a vendor menu.
In use
The navigation menu are present on all applications and offer a consistent way for navigating within an application.
Navigating between sections in the navigation menu
1
When the hamburger button is pressed, the hamburger menu is displayed. The topbar button should remain in the active state as long as the navigation menu is open.
2
The current section are displayed in an active state, as well as in the topbar. When another section is pressed, the navigation menu will close and navigate to the selected section.
Navigating between tabs in the navigation menu
1
When the hamburger button is pressed, the hamburger menu is displayed. The topbar button should remain in the active state as long as the navigation menu is open.
2
The current section are displayed in an active state, as well as in the topbar. When another section is pressed, the navigation menu will close and navigate to the selected section.
Navigating to application settings and vendor support and documentation.
1
App settings button is placed at the bottom of the hamburger menu.
2
The current section are displayed in an active state, as well as in the topbar. When another section is pressed, the navigation menu will close and navigate to the selected section.
Anatomy
Components
1
Top border
2
Search box
3
List item - Normal
4
List item - Expanded
5
List item - Sub item
6
List item (Settings menu button)
7
Vendor logo (Help, support and updates page)
Colors
Element
Color name
1
Top Border
color-ui-element-active
2
Container
color-ui-container-global
3
Divider
color-ui-border-divider
4
Bottom section border
color-ui-border-outline
5
Bottom section
color-ui-container-section
6
Darken layer
color-ui-element-neutral
7
Notification badge
color-alert-warning
Typography
Text category
Text attributes
1
Body normal
Aa
Typeface: Open Sans
Weight: Regular
Size: 16px
2
Body active
Aa
Typeface: Open Sans
Weight: Semi bold
Size: 16px
Measures and spacing
1
Component measures
2
Spacing
3
Border sizes