A good navigation layout offers a high degree of discoverability and feedback, letting users know where they are at all times and ensuring they can easily get to where they want to go, or perform specific actions.
Main header bar
Holds the navigator toggle button, page title, breadcrumbs, user account, app switcher, and right drawer toggle button. Other components such as search or the plus button are application specific.
Demoboard Monitor and Control
Display the current page location within a navigational hierarchy.
It's included in the main header bar
Holds the current application main navigation. Organize content in a tree to indicate hierarchy.
Trees can technically have unlimited nesting, but we recommend avoiding excessive nesting.
Each navigation entry has a specific icon, device entries icon shows device connectivity.
The right drawer is composed by 2 main sections, Quick links and Help & Support. Its main function is to help the user to quickly access oftenly used sections of the site and to give support on doubts that might occur when using the site in general or accessing particular sections of documentation.
The action bar is a horizontal row of buttons or links that give the user a constantly visible reminder of and an easy way to select specific application functions. (On small screens the content is accessible via a "hamburger" menu.)
It's built using 2 rules:
- Left elements — Left aligned - Should be used for sorting or selecting elements on the section (e.g. "Bulk Actions").
- Right elements — Right aligned - Holds actions to interact with the section.
Left & Right elements
Use tabs to separate information into logical sections based on functionality or use case.
Users can easily switch between tabs to perform tasks without leaving the page. Assign a default tab based on the most important use case for the page. The sections that the tabs define function independently of each other, so do not use tabs to define a linear, ordered process.
Tab names must be consistent — always use an icon and the same part of speech for each tab, such as a noun or verb.
Horizontal tabs are fixed, content will scroll behind.
When there are too many tabs to fit in the viewport, horizontal scrolling is enabled and arrows are placed on each side of the tab bar.
Group tabs cockpit
Vertical tabs are fixed and allow scrolling for when you have a large number of tabs.
Although you can use any other layout inside tab content, consider that the available width of the page is smaller when using vertical tabs.
Device tabs Device Management