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 |
Products activation item
The product action item have been created for a specific purpose : gather all new and standalone product. This item should be display below the list of available feature inside the navigation.
|
|
Active |
|---|---|
|
Default |
|
|
Hover/Focused |
|
|
Selected |
|
Regarding the position of the product activation item it should be display after the current product available and activated and before the settings.
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
Loading animation
Side navigation skeleton should be use in case of the data takes few second to load and appears to give a visual hint to the user of what he should expect to get. The skeleton animation should use the tailwind animation “animate-pulse”.
