Side Nav

Navigational elements that are positioned on top of your product architecture. They are the way to navigate through the system.

Known issues
Show details
Known issues
Published: February 27, 2024
Updated: February 27, 2024

 

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

When there are too many items on the navigation, items will become “scrollable”.

A gradient overlay should appear, to give the last item a “vanished” look. It needs to have a 24px bottom margin.

Gradient specs:
bottom colour: #212833; 100%;
top colour: #212833; 0%.

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.

To collapse the sheet, simply press outside of it, and it should do the inverse animation.

Sidebar items on the main navigation will have an overlay layer on top of it. Overlay specs:
#212833; 75%.

 

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