Menu

Overview

The menu is a fully WCAG-compliant navigation component that supports:

• 3 levels of item hierarchy (parent → children → grandchildren)
• 3 layout modes: Sidebar collapsed (rail), Sidebar expanded, Top menu (horizontal)
• Responsive mobile mode with an accordion pattern
• Full keyboard navigation using arrow keys, Home, End, Enter, Space, and Escape
• ARIA attributes for screen reader support (aria-expanded, aria-controls, aria-current)
• Top/Bottom item grouping for logical separation of menu sections

Layout modes

Sidebar - Collapsed (Rail)

When layout: "SIDEBAR" and the menu is collapsed, a narrow rail (60px) is displayed showing only icons.

Behavior:

• Shows item icons with tooltips on hover
• Clicking an item with children opens a flyout column to the right
• Maximum of 7 top items visible; a “view all” button appears for overflow
• The rail is position: fixed, floating over the page content
• Page content reserves a 60px left margin to avoid overlap

Toggle: If sidebar.isCollapsable is true, a hamburger/expand button appears at the top of the rail.

Sidebar - Expanded

When layout: "SIDEBAR" and the menu is expanded, a wider panel (240px) is displayed with icons and text labels.

Behavior:

• Shows item icons and text
• Clicking an item with children opens the level-2 column beside the main panel
• If sidebar.isCollapsable is true, a collapse button (chevron) appears at the top
• If sidebar.isCollapsable is false, the sidebar is always expanded and the page reserves a 240px margin

Toggle: Clicking the collapse button returns to rail mode.

Top Menu (Horizontal)

When layout: "TOPMENU", the menu renders as a horizontal bar below the header (64px height).

Behavior:

• Items are displayed horizontally with icons and text
• Clicking an item with children opens a flyout dropdown below
• Flyout contains level-2 items; selecting a level-2 item with children shows level-3 in a second column
• No sidebar margin is applied to page content

Mobile

When the viewport is ≤ 1024px, the menu switches to mobile mode regardless of the configured layout.

Behavior:

• Full-screen overlay with a close button
• Items render as an accordion: tapping a parent expands its children inline
• Supports all 3 levels of nesting
• Selected parent items auto-expand on open
• A hamburger button must be provided externally to open the mobile menu

Item hierarchy

The menu supports 3 levels of nested items:

Level 1 (Rail icons / Expanded items / Horizontal items)
├── Level 2 (Flyout column items)
│   ├── Level 3 (Second flyout column items)
│   └── Level 3
├── Level 2
└── Level 2

Items are nested using the items array property on each IMainMenuItem. The hierarchy is built recursively and capped at 3 levels — any deeper nesting is ignored.

Top / Bottom grouping

Items can be grouped into top or bottom sections using the isTop field:

• isTop: true → Item appears in the top group (main navigation)
• isTop: false or not set → Item appears in the bottom group (utilities, settings, etc.)

In rail mode, the top group scrolls if there are many items, while the bottom group stays fixed at the bottom.

Configuration

Minimal configuration (sidebar)

{
  "layout": "SIDEBAR",
  "sidebar": {
    "isCollapsable": true
  }
}

Always expanded sidebar

{
  "layout": "SIDEBAR",
  "sidebar": {
    "isCollapsable": false
  }
}

Horizontal top menu

{
  "layout": "TOPMENU"
}

With mobile close callback

{
  "layout": "SIDEBAR",
  "sidebar": {
    "isCollapsable": true
  },
  "accessibleMenu": {
    "onCloseMobileMenu": "callback function reference"
  }
}

Keyboard navigation

Accessibility features

• All interactive elements have proper role and ARIA attributes
• aria-current="page" marks the currently selected item
• aria-expanded indicates whether a parent item’s children are visible
• aria-controls links parent buttons to their submenu regions
• Flyout regions use role="region" with aria-labelledby pointing to the parent button
• Focus is programmatically managed when opening/closing flyouts
• Tooltips in rail mode provide accessible names for icon-only buttons

Differences from Legacy Menu