Behavior
Overview
The side navigation is composed of 3 levels. The 1st level is the main navigation that allow our user to navigate between the different products, but also to reach the settings and business sections.
To access to the 2nd level, you need to open a product or to select a tab that group mulitple items. When you open a product, the 2nd navigation will be display to gather all the feature connected to this specific product/category.
Last but not least, the 3rd one is use to provide extra details regarding a feature.
Side navigation components
The product item are used for the 1st level of the navigation. These items are should only be used to display the products available and they give the possibility to associate a color to a product.
|
|
Active |
Disable |
|---|---|---|
|
Default |
|
|
|
Hover/Focused |
|
N/A |
|
Selected |
|
N/A |
Variants
Product navigation can have multiple colors to be associated to different product.
Tabs navigation
The tabs navigation should be use for the 2nd level of the navigation. They can either redirect to a page, open a 3rd level navigation for groups features tab’s or even to pin a page.
|
|
Active |
Disable |
|---|---|---|
|
Default |
|
|
|
Hover/Focused |
|
N/A |
|
Selected |
|
N/A |
Navigation header
Navigation header can be used in 2 case : to introduce a product or to introduce a group of feature.
Product header
|
A product header will be always composed of 2 elements : - The mention : control panel and the name of the current product - The product header must be display on the top of the navigation, below the button “back”, to mention on which product our user is navigating. |
|
|
|
|
Desktop behavior
