Indicator items

The DropdownMenu component supports indicator items using the DropdownMenu.IndicatorItem component. This allows you to create items with indicators that can be used to make color pickers or other visual indicators.

Properties

IndicatorItem

The IndicatorItem component is a specialized item that displays a color indicator.

<DropdownMenu.IndicatorItem
  color="green"             // indicator color
  title="Item title"        // title of the item
  pulse                     // [OPTIONAL] animate the indicator
  description="Description" // [OPTIONAL] description text
  label="Label"             // [OPTIONAL] right-aligned label
  shortcut="⌘K"             // [OPTIONAL] keyboard shortcut
  checkmark                 // [OPTIONAL] show checkmark icon
  className="my-class"      // [OPTIONAL] custom class
  disabled                  // [OPTIONAL] disable the item
  onSelect={onSelect}       // [OPTIONAL] event handler
>
  {/* Optional nested items for submenu */}
</DropdownMenu.IndicatorItem>

Prop	Required	Default	Type
color	true		'gray' | 'green' | 'red' | 'yellow' | 'blue' | 'purple' | 'brown' | 'cyan' | 'indigo' | 'lime' | 'mint' | 'orange' | 'pink' | 'violet'
pulse	false	false	boolean
title	true		ReactNode
description	false		string
label	false		string
shortcut	false		string
checkmark	false	false	boolean
tag	false		TagProps
className	false		string
disabled	false	false	boolean
onSelect	false		(event: Event) => void
children	false		ReactNode