Sidebars are part of the Global / Main navigation elements and allow the user to navigate through the system, rather than simply navigate inside the content.
Usage
Component |
Usage |
Placement |
Acts upon |
---|---|---|---|
Global / Main navigation (Sidebar and Topbar) |
Displays while mouse hovering specific elements |
Outside the content container. On the very edges of the screen (top or left) |
The entire system or platform |
Content / Inner navigation (Tabs, breadcrumbs, steppers, pagination, distributors bar, headers) |
Appears temporarily after an item has been added to the cart |
Right below the cart button on the navigation bar |
The content inside the system or platform |
Anatomy
System and product bars
|
System bar (thinnest, on the left)
1. Company logo. Fixed.
2. System icons (ideally no more than 3), are links to pages inside the product. These are for “general” definitions, e.g. settings of the app. Specs: Available states: Default, Hover, and Selected.
3. Avatar will take the user to the profile page, where things like email, notifications, etc, are handled.
Product bar (thickest, on the right)
4. Product name. This is optional, as, for instance, the CX Back office is not using it
5. Navigation item. Specs: Available states: Default, Hover, and Selected. First item placement starts with a 15% top padding.
6. Navigation item with trailing icon. This element means that this item has another level of navigation.
7. Divider. All elements in between these dividers are part of a group. In this case, are items that are categorized as “favourites”. |
|
⚠️ Edge case |
Sidebar bottom sheet
The sidebar can have an extra level of navigation. When there is more than one action associated with clicking the user's avatar, there should be a bottom sheet.
|
The bottom sheet will show up from the bottom, and the image on the left is in its final position. |
Options
Sidebar
Property |
Values |
Description |
---|---|---|
Double bar |
true / false |
Shows or hides the product bar (the one on the right) |
System bar
Property |
Values |
Description |
---|---|---|
Device |
desktop / tablet |
Adjusts widths, spacing and icon sizes to the selected device |
Theme |
dark / light |
Toggles between dark or light themes |
Avatar |
true / false |
Shows or hides the user's avatar |
Products |
true / false |
Shows or hides the product's menu buttons |
Menu |
true / false |
Shows or hides the menu icon button |
Product bar
Property |
Values |
Description |
---|---|---|
Level |
L1 / L2 |
The menu items will be visually equivalent to navigation level 1 or to level 2, according to the option selected |
Theme |
dark / light |
Toggles between dark or light themes |
Bottom sheet
Property |
Values |
Description |
---|---|---|
- |
- |
- |
Behaviour
|
Navigating inside the product bar, from the 1st level to the 2nd level |
|
Bottom sheet sliding from the bottom when the user's avatar is selected |
Usage guidelines
|
|
|
|