Menu Item

Individual item within a menu component. Can include icons and display selected state.

Medium Size

Default

Settings

Selected

Settings

With Icon

Settings

With Icon Right

Settings

With Tag

Settings
3

With Colored Tag

Notifications
New

With Dot Tag

Messages
5

With User Image

johndoe
John Doe

With Second Label

Account SettingsManage your profile and preferences

Large Size

Default

Settings

Selected

Settings

With Icon & Tag

Settings
5

With All Props

Settings
Pro

Tag Variants

Warning Item
Attention

Long Text with Truncation

This is a very long menu item text that should truncate with ellipsis when it exceeds the available space
Info
interface MenuItemProps {
  href?: string;
  iconName?: string;
  userHandle?: string;
  userImgUrl?: string;
  label: string;
  secondLabel?: string; // Secondary text below menu item (left aligned)
  isSelected?: boolean;
  onClick?: any;
  className?: string;
  size?: 'medium' | 'large';
  tag?: {
    label: React.ReactNode;
    iconName?: string;
    color?: 'default' | 'success' | 'warning' | 'error' | 'info';
    variant?: 'contained' | 'textOnly' | 'dot';
  };
  iconRight?: string;
}