MenuItem

free

MenuItem aligns custom navigation and action rows to the Menu interaction model.

Preview

Dark

Profile

Billing

Notifications

import { useState } from 'react';
import { PiBell, PiCreditCard, PiUser } from 'react-icons/pi'
import { MenuItem } from '@/components/ui';

const items = [
  { key: 'profile', label: 'Profile', icon: PiUser },
  { key: 'billing', label: 'Billing', icon: PiCreditCard },
  { key: 'notifications', label: 'Notifications', icon: PiBell },
];

export default function UsageDemo() {
  const [activeKey, setActiveKey] = useState('profile');

  return (
    <div className="w-full max-w-[250px] space-y-1">
      {items.map((item) => {
        const Icon = item.icon;

        return (
          <MenuItem
            key={item.key}
            eventKey={item.key}
            isActive={activeKey === item.key}
            onSelect={(key: string) => setActiveKey(key)}
          >
            <Icon className="text-base text-muted-foreground" />
            {item.label}
          </MenuItem>
        );
      })}
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add MenuItem

Examples

Basic

Preview

Dark

Overview

Customers

Orders

import { MenuItem } from '@/components/ui';

export default function BasicDemo() {
  return (
    <div className="w-full max-w-[250px] space-y-1">
      <MenuItem eventKey="overview">Overview</MenuItem>
      <MenuItem eventKey="customers">Customers</MenuItem>
      <MenuItem eventKey="orders">Orders</MenuItem>
    </div>
  );
}

States

Preview

Dark

Available

Selected

Disabled

import { MenuItem } from '@/components/ui';

export default function StatesDemo() {
  return (
    <div className="w-full max-w-[250px] space-y-1">
      <MenuItem eventKey="available">Available</MenuItem>
      <MenuItem eventKey="selected" isActive>
        Selected
      </MenuItem>
      <MenuItem eventKey="disabled" disabled>
        Disabled
      </MenuItem>
    </div>
  );
}

Rendered Element

Preview

Dark

import { PiArrowRight } from 'react-icons/pi'
import { MenuItem } from '@/components/ui';

export default function RenderedElementDemo() {
  return (
    <div className="w-full max-w-[250px] space-y-1">
      <MenuItem asElement="a" href="/components/ui/menu" eventKey="menu">
        Menu docs
        <PiArrowRight className="ms-auto text-base text-muted-foreground" />
      </MenuItem>
      <MenuItem asElement="button" type="button" eventKey="button">
        Button row
      </MenuItem>
    </div>
  );
}

Hierarchy Indicator

Preview

Dark

Inbox

Priority

API

MenuItem is the exported base item row used by Menu and Dropdown internals. It renders a configurable element, applies active/disabled data states, and can show a hierarchy indicator.

Prop	Description	Type	Default
`asElement`	Element or component rendered as the item root.	`ElementType`	`'div'`
`children`	Item label or custom inline content.	`ReactNode`	-
`className`	Class names merged with the base item and state classes.	`string`	-
`disabled`	Applies disabled styling and `data-disabled`. Guard handlers separately when the item should be inert.	`boolean`	-
`eventKey`	Selection key passed to `onSelect`.	`string`	-
`hierarchyIndicator`	Shows the hierarchy indicator line before the item content.	`boolean`	-
`id`	Native id applied to the rendered element.	`string`	-
`indicatorClassName`	Class names applied to the hierarchy indicator wrapper.	`string`	-
`indicatorLineClassName`	Class names applied to the hierarchy indicator line.	`string`	-
`isActive`	Applies active styling and `data-state="active"`.	`boolean`	-
`menuItemHeight`	Item height. Numbers are written as pixel values.	`string \| number`	`36`
`onSelect`	Called with `eventKey` when the item is clicked.	`MenuItemSelectHandler`	-
`ref`	Ref forwarded to the rendered item element.	`Ref<HTMLElement>`	-
`...nativeProps`	Native props for the rendered root element.	`NativeMenuItemProps`	-

Types

type MenuItemSelectHandler = (eventKey: string, e: MouseEvent) => void;
type NativeMenuItemProps = ComponentProps<ElementType>;