MiHCM
navigation/@mihcm/ui·v0.21.0·stable

Main Sidebar

Figma-style main app sidebar. Compact 46px desktop rail, mobile bottom menu, expandable drilldown panel with icon, title, description, badges, nested levels, and custom panel slots. IconSidebar remains as a compatibility alias.

ConfiguratorExamplesUsageAccessibilityApi

WCAG 2.1 AA — release blocker

Web (React DOM)

  • Desktop renders as <aside aria-label="Main Sidebar"> so it lands in the landmark roles.
  • Mobile renders as <nav aria-label="Main Sidebar"> with a bottom rail and menu trigger.
  • In mobile mode the built-in hamburger carries aria-haspopup="menu", aria-expanded, and an aria-label ("Open menu" by default). In controlled mode (mobileOpen), the built-in hamburger is suppressed — the consumer trigger (e.g. TopBarMenuButton) must carry the same attributes; TopBarMenuButton does this out of the box.
  • Each item is a real <button> or <a> — the choice depends on whether href was passed.
  • Each item carries both aria-label={label} and title={label} so:
    • Screen readers get an accessible name despite the icon-only visual.
    • Sighted users get a hover tooltip.
  • The active item gets aria-current="page".
  • The expand/collapse trigger exposes aria-expanded.
  • Disabled items set disabled and aria-disabled.
  • Focus rings use semantic ring tokens and remain visible on the primary rail and panel.
  • The collapsed panel is not rendered, so hidden drilldown links are not left in the tab order.

Keyboard navigation

  • Tab moves between items.
  • Enter / Space activates the focused item.
  • The expanded drilldown panel keeps normal document tab order. Back and collapse controls are explicit buttons.
  • For href-mode items, the browser's link semantics apply (cmd-click opens in a new tab, etc.).

Reduced motion

  • Expansion and drilldown transitions use short transform/opacity animations. User agents honour prefers-reduced-motion.

Color is never the only signal

  • The active item is a full accent surface change, not just a colour shift.
  • Expanded panel rows include visible text labels and optional descriptions.
  • Mobile rail rows include visible text labels below the icon.

Audit checklist

  • Every item has both aria-label and title matching the visible meaning.
  • Active item has aria-current="page".
  • Focus ring visible against the rail and panel.
  • Expanded trigger has the correct aria-expanded value.
  • Tab order matches visual order.