react-pro-sidebar

The Menu is the styled container for MenuItem and SubMenu children. It manages several core behaviors for the sidebar navigation, including:

• Styling system: Uses menuItemStyles to apply consistent styles to children.
• Accordion coordination: Controls whether only one top-level SubMenu can be open at a time via the accordion prop.
• Popover mode: Determines if top-level SubMenus open as floating poppers via the popover prop.
• Transitions: Manages the slide animation duration for inline submenus via transitionDuration.
• Icon rendering: Provides a way to override expand icons via renderExpandIcon.

You can nest multiple Menu components inside a single Sidebar to create distinct sections (e.g., "General" and "Extras").

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem>Pie</MenuItem>
      <MenuItem>Line</MenuItem>
    </SubMenu>
    <MenuItem>Documentation</MenuItem>
  </Menu>
</Sidebar>;

react-pro-sidebar provides two complementary styling primitives for theming:

1. rootStyles: An Emotion CSSObject applied to each component's root element. Use this for high-level styling or to target inner nodes by combining it with the exported sidebarClasses or menuClasses registries.
2. menuItemStyles (on Menu): A structured slot system for theming MenuItem, SubMenu, and their children.

Available slots for menuItemStyles include:

• root
• button
• label
• icon
• prefix
• suffix
• subMenuContent
• SubMenuExpandIcon

Each slot accepts a CSSObject or a function that receives the item's state: { level, active, disabled, isSubmenu, open }.

import { Sidebar, Menu, MenuItem, SubMenu, menuClasses, type MenuItemStyles } from 'react-pro-sidebar';

const themes = {
  light: { bg: '#ffffff', text: '#0d3b66', icon: '#0098e5', hoverBg: '#cfe7ff', hoverText: '#0d3b66' },
  dark:  { bg: '#0b2948', text: '#cbd5e1', icon: '#59d0ff', hoverBg: '#00458b', hoverText: '#fff' },
  brand: { bg: '#1b1035', text: '#e9e1ff', icon: '#c084fc', hoverBg: '#4c1d95', hoverText: '#fff' },
};

export default function ThemedSidebar({ theme = 'light' }) {
  const t = themes[theme];

  const menuItemStyles: MenuItemStyles = {
    button: {
      color: t.text,
      [`&.${menuClasses.active}`]: {
        color: t.hoverText,
        backgroundColor: t.hoverBg,
      },
      '&:hover': {
        backgroundColor: t.hoverBg,
        color: t.hoverText,
      },
    },
    icon: { color: t.icon },
  };

  return (
    <Sidebar
      backgroundColor={t.bg}
      rootStyles={{ color: t.text, border: 'none' }}
    >
      <Menu menuItemStyles={menuItemStyles}>
        <MenuItem active>Dashboard</MenuItem>
        <SubMenu label="Charts">
          <MenuItem>Pie</MenuItem>
          <MenuItem>Line</MenuItem>
        </SubMenu>
      </Menu>
    </Sidebar>
  );
}

When using react-pro-sidebar, be aware of the following architectural choices regarding accessibility:

• Navigation Pattern: The package follows a "list of links" navigation pattern. It does not follow the WAI-ARIA menu pattern (which requires a single roving tabindex and arrow-key navigation). If your use case requires strict menu semantics (like a context menu), you must implement your own keyboard handlers.
• Popover Mode: In popover mode, top-level submenus are rendered as floating panels via Popper.js. These panels are not constrained to the sidebar's accessible name region; they are reached in the DOM order during landmark navigation.
• Color Contrast: While the default theme meets WCAG AA contrast, any customizations made via menuItemStyles or rootStyles must be manually verified for contrast compliance, especially for hover, active, and disabled states.