On this page:

Menu

Preview

index.tsx
Menu

Scroll

Preview

index.tsx

Group

Preview

index.tsx

Design Tokens for Menu

TokenColor forState/Meaning
--par-color-bg-surface-item-enabledMenu item backgroundDefault/Enabled
--par-color-bg-surface-item-hoveredMenu item backgroundHovered
--par-color-bg-surface-item-neutral-subtle-selectedMenu item backgroundSelected (neutral, subtle)
--par-color-bg-surface-item-neutral-pronounced-selectedMenu item backgroundSelected (neutral, pronounced)
--par-color-bg-surface-item-accent-subtle-selectedMenu item backgroundSelected (accent, subtle)
--par-color-bg-surface-item-accent-pronounced-selectedMenu item backgroundSelected (accent, pronounced)
--par-color-bg-surface-item-disabledMenu item backgroundDisabled
--par-color-text-surface-item-enabledMenu item textDefault/Enabled
--par-color-text-surface-item-disabledMenu item textDisabled
--par-color-text-surface-item-neutral-subtle-selectedMenu item textSelected (neutral, subtle)
--par-color-text-surface-item-neutral-pronounced-selectedMenu item textSelected (neutral, pronounced)
--par-color-text-surface-item-accent-subtle-selectedMenu item textSelected (accent, subtle)
--par-color-text-surface-item-accent-pronounced-selectedMenu item textSelected (accent, pronounced)
--par-color-icon-field-button-enabledMenu item iconDefault/Enabled
--par-color-border-surfaceBorderDefault
--par-color-divider-menuDividerDefault
--par-color-text-secondaryGroup label textDefault

PropTypeDefaultDescription
positionstring'bottom-start'Menu placement (Floating UI placement string)
size'sm' | 'md''sm'Size of the menu
menuColor'neutral' | 'accent''neutral'Color of the menu
prominence'subtle' | 'pronounced''subtle'Visual prominence of the menu
theme'default' | 'alternative''default'Theme of the menu
anchorHTMLElement | stringAnchor element or selector
menuItemsLimitnumberMax number of items before overflow/scroll
scrollIndicatorbooleanfalseShow scroll indicators when scrollable
searchablebooleanfalseShow search input for filtering items
defaultSearchstring''Default value for search input
searchPlaceholderstringPlaceholder for search input
noResultsTextstring'No results found'Text when no search results
usePortalbooleantrueRender menu in a portal
isOpenbooleanfalseWhether the menu is open
isLoadingbooleanLoading state
disabledbooleanfalseDisable the menu