Legacy Menu

Overview

The legacy menu is the original menu implementation. It supports basic navigation with custom CSS styling per item but lacks the full accessibility and hierarchy features of the new menu.

Features

• 2 levels of item hierarchy (parent → children)
• 2 layout modes: Sidebar and Top menu
• Custom CSS styling per item via the styles field
• Collapse/Expand with configurable default state (MenuDisplay.COLLAPSED / MenuDisplay.EXPANDED)
• Hamburger menu on mobile (≤ 1024px)

Layout modes

Sidebar

The sidebar can be configured to be collapsible or always visible in one state.

• defaultDisplay: "COLLAPSED": The sidebar starts minimized (icons only)
• defaultDisplay: "EXPANDED": The sidebar starts fully open (icons + text)
• isCollapsable: true: User can toggle between collapsed and expanded
• isCollapsable: false: The sidebar remains expanded (240px), the toggle control is not shown, and defaultDisplay is ignored.

Top Menu

When layout: "TOPMENU", items render in a horizontal bar. Items with children show a dropdown on interaction.

Hamburger (mobile)

On screens ≤ 1024px, the menu collapses into a hamburger icon. The hamburguerMenu configuration controls styling.

Custom styling

The legacy menu supports extensive CSS customization per item and per state:

{
  "layout": "SIDEBAR",
  "sidebar": {
    "isCollapsable": true,
    "defaultDisplay": "COLLAPSED",
    "sidebarCollapseStyle": "background-color: #003f5f;",
    "sidebarExpandedStyle": "background-color: #003f5f;",
    "collapsedMenuItemStyle": {
      "icon": "color: #ffffff;",
      "text": "color: #ffffff;"
    },
    "expandedMenuItemStyle": {
      "icon": "color: #ffffff;",
      "text": "color: #ffffff;"
    },
    "styleMenuItem": {
      "icon": "color: #006ba6;",
      "text": "color: #006ba6;"
    }
  }
}

Styling properties

• sidebarCollapseStyle: CSS for the collapsed sidebar container
• sidebarExpandedStyle: CSS for the expanded sidebar container
• collapsedMenuItemStyle: Item styles when the sidebar is collapsed
• expandedMenuItemStyle: Item styles when the sidebar is expanded
• styleMenuItem: Default item styles

Each style object (IMainMenuItemStyles) supports:

• sidebarMenu: Styles for the sidebar menu container
• item: Styles for the menu item wrapper
• icon: Styles for the item icon
• text: Styles for the item text
• img: Styles for the item image

Configuration

Enabling legacy menu

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

With custom colors

{
  "useLegacyMenu": true,
  "layout": "SIDEBAR",
  "sidebar": {
    "isCollapsable": true,
    "defaultDisplay": "EXPANDED",
    "sidebarExpandedStyle": "background-color: #1a1a2e;",
    "expandedMenuItemStyle": {
      "icon": "color: #e94560;",
      "text": "color: #ffffff; font-weight: 600;"
    },
    "collapsedMenuItemStyle": {
      "icon": "color: #e94560;"
    }
  }
}

Limitations compared to Menu

• Maximum 2 levels of hierarchy (no grandchildren support)
• No built-in keyboard navigation model (relies on browser tab order)
• No ARIA attributes for expanded/collapsed states
• No tooltip support in collapsed mode
• No top/bottom item grouping
• No expanded image per item
• Custom styles must be written as CSS interpolation strings

When to use the Legacy Menu

Consider using the legacy menu if:

• You need fine-grained CSS control over individual item appearance
• Your existing deployment relies on the legacy styling API
• You only need 1-2 levels of navigation

For all other cases, the menu is recommended as it provides better accessibility, keyboard navigation, and richer hierarchy support out of the box.