Sidebar

figma:ready
scss:ready
webComponent:ready

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:

ElementPurposeDisplayNotes
Expand / CollapseAllows users to collapse or expand the sidebarMandatory
HomeAllows users to access directly to a product or the portal homepageOptionalThe icon cannot be edited to keep consistency, but the label can be customised.
FeaturesProvides access to the different features of the product or portalMandatoryThe list of features will scroll if it exceeds the display container.
UtilitiesAllows access to transversal functionalities of the productOptional
User menuAllows the user to access their account-related featuresOptional

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.
Good to know

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.

Good to know

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.

StateWidth
Collapsed64px
Expanded320px

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.

Never change the width of the Sidebar.
Don't change Expand/collapse and Home icons.