Menu

A flexible menu component that provides a list of selectable items. Items can be simple labels or actionable links.

Usage

Basic Menu

Render the Menu with a list of MenuItemProps:

<Menu.Root defaultValue="home">
  <Menu.Item value={'home'} label={'Home'} />
  <Menu.Item value={'about'} label={'About'} />
</Menu.Root>

Menu using Items

Use Menu with items prop data

<Menu.Root
  items={[
    { value: 'home', label: 'Home', href: '#home' },
    { value: 'about', label: 'About', href: '#about' },
  ]}
  defaultValue="home"
/>

Menu with Icons

Include icons before or after menu items:

<Menu.Root
  items={[
    { value: 'home', label: 'Home', href: '#home', iconPrepend: <Icon type="Home" /> },
    { value: 'about', label: 'About', href: '#about', iconAppend: <Icon type="HelpCircle" /> },
  ]}
  defaultValue="home"
/>

API

Props

Menu

Prop	Type	Default	Required
items	MenuItemProps[]	-	Yes
defaultValue	string	-	Yes
justify	'start' | 'center' | 'end'	'start'	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-

Menu Item

Prop	Type	Default	Required
label	ReactNode	-	Yes
onClick	() => void	-	-
href	string	-	-
iconPrepend	ReactNode	-	-
iconAppend	ReactNode	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-