Sidebar
Sidebar menu is the primary navigation. It provides access to the main sections of the platform.
Last updated
Was this helpful?
Sidebar menu is the primary navigation. It provides access to the main sections of the platform.
Last updated
Was this helpful?
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.
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 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.
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.
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.
Sidebar always goes with . While Sidebar allows users to navigate through various activities, Topbar is dedicated its profile and personal activities.
