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.
The Sidebar component consists of the following elements:
|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|
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 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.
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.
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.
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.
Keep labels within 55 characters to enhance readability and prevent text truncation.
To keep consistency, the Page header title must be the same than the sidebar entry name.
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.