Sidebar

Sidebar menu is the primary navigation. It provides access to the main sections of the platform.

Navigation sidebar appears to the left side of all our products. It showcases all Mirakl key features and enables users to easily switch between activities.

Automatically handled by ROMA

Overview

  • Sidebar is collapsible to make sure users can focus on their tasks. When Sidebar is collapsed, users can hover the icon and an action menu appears.

  • Sidebar items may display a counter, like Messages.

  • Sidebar header may have a Store switcher feature that triggers an action menu.

Sidebar and topbar

Sidebar always goes with Topbar. While Sidebar allows users to navigate through various activities, Topbar is dedicated its profile and personal activities.

Sidebar menu supports two levels of navigation :

  • Section (level 1) is the main level, used as a heading of nested pages.

  • Sub-level (level 2) is the secondary level with direct redirection to targeted pages.

Sections are displayed in white (theme.color.white) with an icon. With a chevron, it means sub-level are attached to the section. Thus, on click to Section title, it opens Sub-level menu. Without a chevron, it means no sub-level are attached to the section. Thus, on click, users are redirected to the section page.

Sub-level are displayed in blue (theme.color.primary[900]) with no icons. Sub-level must always be attached to a Section. At least two Sub-levels are needed to created a nested section.

Illustration of Sections and Sub-level

Content

Naming Section and Sub-section is strategic in user experience. Users must be able to scan an dunderstand very quickly menu. Keep the navigation link text short. They can be shorter versions of pages titles. Try to use a specific task/mission without necessarily using an action verb.

Accessibility

Navigational mechanisms must be repeated within a set of Web pages. (WCAG 3.2.3, level AA) Order, naming and behavior must be repeated through all sections. Thus, it is important to respect naming convention. Naming a section or a sub-section must be a joint effort of Product, Design, Content and Marketing teams.

Last updated

Was this helpful?