MenuItem

MenuItem represents a single clickable item inside a Menu. It supports icons, prefix/suffix slots, an active state (with automatic aria-current="page"), and can be rendered as any element via the component prop — making router integrations straightforward.

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
 
<Sidebar>
  <Menu>
    <MenuItem icon={<DashboardIcon />} active>
      Dashboard
    </MenuItem>
  </Menu>
</Sidebar>;

Props

icon

Icon node displayed before the label. Typically an inline SVG.

• Type: ReactNode
• Default: –

<MenuItem icon={<DashboardIcon />}>Dashboard</MenuItem>

active

Marks the item as active. Sets aria-current="page" and applies the menuClasses.active class — visible by default and themeable via menuItemStyles.

• Type: boolean
• Default: false

<MenuItem active>Current page</MenuItem>

disabled

Disables the item. Sets aria-disabled and applies the menuClasses.disabled class.

• Type: boolean
• Default: false

<MenuItem disabled>Coming soon</MenuItem>

prefix

Node rendered between the icon and the label. Useful for status dots or short tags.

• Type: ReactNode
• Default: –

suffix

Node rendered after the label. Common for badges, keyboard shortcuts, or counters.

• Type: ReactNode
• Default: –

<MenuItem suffix={<Badge>New</Badge>}>Calendar</MenuItem>

component

Override the element used for the menu button. Accepts a string tag name (e.g. 'div') or a React element — handy for routing integrations.

• Type: string | ReactElement
• Default: –

// React Router
import { NavLink } from 'react-router-dom';
 
<MenuItem component={<NavLink to="/dashboard" />}>Dashboard</MenuItem>;
 
// Next.js
import Link from 'next/link';
 
<MenuItem component={<Link href="/dashboard" />}>Dashboard</MenuItem>;

rootStyles

Emotion CSSObject applied to the MenuItem’s root <li> element.

• Type: CSSObject
• Default: –

<MenuItem rootStyles={{ marginBottom: 4 }}>…</MenuItem>

All props

Any other valid <a> props (e.g. href, onClick, target, rel) are forwarded to the underlying anchor.