Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Content
  • Accessibility

Was this helpful?

  1. Design
  2. Components
  3. Navigation

Sidebar

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

Last updated 1 year ago

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.

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 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.

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.

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

Topbar
Sidebar and topbar
Illustration of Sections and Sub-level