IconMenu

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

Usage

Basic IconMenu

Render the IconMenu with a list of IconMenuItemProps:

<IconMenu.Root defaultValue="home">
  <IconMenu.Item value={'home'} label={<Icon type={'Home'} />} />
  <IconMenu.Item value={'about'} label={<Icon type={'Zap'} />} />
</IconMenu.Root>

IconMenu using Items

Use IconMenu with items prop data

<IconMenu.Root
  items={[
    { value: 'home', label: <Icon type={'Home'} />, href: '#home' },
    { value: 'about', label: <Icon type={'Zap'} />, tooltipLabel: 'About', href: '#about' },
  ]}
  highContrast
  defaultValue="home"
/>

API

Props

IconMenu

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

IconMenu Item

Prop	Type	Default	Required
label	ReactNode	-	Yes
onClick	() => void	-	-
href	string	-	-
tooltipLabel	string	-	-
tooltipPlacement	'top' | 'bottom' | 'left' | 'right'	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-