Sidebar
The Sidebar component is a vertical navigation element used in digital products for quick access to top-level features, designed to save space and maintain focus on features and business gestures. It is typically combined with the Page header component to structure the user experience in digital products and portals.
Variations
Anatomy
The Sidebar component consists of the following elements:
| Element | Purpose | Display | Notes |
|---|---|---|---|
| Expand / Collapse | Allows users to collapse or expand the sidebar | Mandatory | |
| Home | Allows users to access directly to a product or the portal homepage | Optional | The icon cannot be edited to keep consistency, but the label can be customised. |
| Features | Provides access to the different features of the product or portal | Mandatory | The list of features will scroll if it exceeds the display container. |
| Utilities | Allows access to transversal functionalities of the product | Optional | |
| User menu | Allows the user to access their account-related features | Optional |
Levels
The Sidebar supports two levels of navigation: the first level is mandatory and always displayed, while the second level appears when clicking on a feature if an additional navigation level is needed. These levels specifically affect the "Features" section.
Features section
Features are grouped in accordion-like sections and can be available in three types:
- Default: Users access the products directly within the portal.
- External link: Users access the products from a new tab.
- Blocked: Users can't access the content. The feature is not yet available or restricted to certain types of users.
Users can scroll vertically on both navigation levels if there isn't enough space to display all the items.
Utilities section
The Utilities section provides access to optional cross-functionalities of the product. It's worth noting that this section is attached to the user's menu.
User menu
The User Menu is an optional and additional element that provides access to account-related functionalities like profile settings, language preferences, and logout. Only the user's avatar, name, and role are displayed in the collapsed version.
Behaviours
By default, the sidebar component is displayed in a collapsed version, showing only icons for navigation. Labels appear when the sidebar is in the extended version, providing additional clarity and context to the navigation options.
Please note that the sidebar expands over the page container.
Restrictions
Labels
Keep labels within 55 characters to enhance readability and prevent text truncation.
Consistency
To keep consistency, the Page header title must be the same than the sidebar entry name.
Layout
The sidebar must be fixed to the left-hand side of the screen, and the container content and its grid must start from the right side of the sidebar to the right side of the screen. The sidebar has a fixed width depending on its state.
| State | Width |
|---|---|
| Collapsed | 64px |
| Expanded | 320px |
Do's and Don'ts
It is recommended to combine the Sidebar with the Page header component.
Order of the elements within the Sidebar should be consistent across all pages.
Sidebar must always be positioned on the left side of the viewport.