TIP

DropdownMenu is a wrap over Dropdown with the addition of features for switching options from the keyboard.

DropdownMenu

DropdownMenu is a wrap over <Dropdown/>, which is a wrap over <Popper/>.

import DropdownMenu from '@semcore/ui/dropdown';
<DropdownMenu />;

DropdownMenuProps

& {...}

Name	Type	Description
selectable	boolean	Set role `menuitemradio` (or `menuitemcheckbox` if `multiselect`) for Dropdown.Item
multiselect	boolean	Multiple select
size		Size of the menu
defaultHighlightedIndex	number | null	Index of the element selected by default
highlightedIndex	number | null	Index of the selected item
onHighlightedIndexChange	(highlightedIndex: number | null) => void	Callback for highlightedIndex change highlightedIndex - Index of the selected item
locale	string	Specifies the locale for i18n support
inlineActions	boolean	Flag for menu that using as actions on DropdownMenu.Item
itemsCount	number	Count of menu items (for virtual lists only)

DropdownMenu.Trigger

DropdownMenu.Trigger is a wrap over <Dropdown.Trigger/> component, which is a wrap over <Popper.Trigger/>.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Trigger />;

DropdownMenu.Popper

DropdownMenu.Popper is a wrap over <Dropdown.Popper/> component, which is a wrap over <Popper.Popper/>.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Popper />;

DropdownMenu.List

DropdownMenu.List is a container component for the list items with the <ScrollArea/> inside it.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.List />;

DropdownMenuListProps

& & {...}

Name	Type	Description
size		Size of the menu

DropdownMenu.Menu

DropdownMenu.Menu is a wrap over the <Dropdown.Popper/> + <DropdownMenu.List/> component. In fact, it's syntactic sugar when no direct access to the Popper node is needed.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Menu />;

DropdownMenu.Item

Interactive menu items that are available for selection and switching from the keyboard.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;

DropdownMenuItemProps

& {...}

Name	Type	Description
selected	boolean	Enables selected state. For selectable dropdowns only.
disabled	boolean	Disables item
size		Size of the component
index	number	Index of item (used in virtualized lists)

DropdownMenu.Item.Content

Content of menu item. Use it if you need Hints, Actions of nested menus.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item.Content />;

FlexProps

& {...}

Name	Type	Description
inline	boolean	It manages the `inline-flex` property
reverse	boolean	Adds the `reverse` property to `flex-direction`
flexWrap	boolean	It manages the `flex-wrap` property
direction		It manages the `flex-direction` property
alignItems		It manages the `align-items` property
alignContent		It manages the `align-content` property
justifyContent		CSS `justify-content` property
gap		CSS `gap` property
rowGap		CSS `gap` property
columnGap		CSS `gap` property
scaleIndent	number	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).

DropdownMenu.Item.Text

Text of menu item. Use it if you need to crop your text in an item.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item.Text />;

NSText.Props

& & ( {formatTags?: boolean; ellipsis?: never; ellipsisProps?: never; hint?: never; hintProps?: never } | ( {formatTags?: never } & & ))

Dropdown.Group

Group of interactive menu items.

import Dropdown from '@semcore/ui/dropdown';
<Dropdown.Group />;

DropdownGroupProps

& {...}

Name	Type	Description
title		Title for group of dropdown menu items
subTitle	string	Subtitle for group of dropdown menu items
sticky	boolean	Render group title as sticky element for nested items

DropdownMenu.Item.Hint

This noninteractive menu item is used to display tips in the list. Using as an aria-describedby for DropdownMenu.Item.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item.Hint />;

FlexProps

& {...}

Name	Type	Description
inline	boolean	It manages the `inline-flex` property
reverse	boolean	Adds the `reverse` property to `flex-direction`
flexWrap	boolean	It manages the `flex-wrap` property
direction		It manages the `flex-direction` property
alignItems		It manages the `align-items` property
alignContent		It manages the `align-content` property
justifyContent		CSS `justify-content` property
gap		CSS `gap` property
rowGap		CSS `gap` property
columnGap		CSS `gap` property
scaleIndent	number	Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).

Context

Context of the component is available inside the render-function.

DropdownMenuContext

& {...}

Name	Type	Description
highlightedIndex	number	Tracks which menu item is currently highlighted/focused for keyboard navigation
getListProps		Returns props for the menu list container
getItemProps		Returns props for individual menu items
getItemHintProps		Returns props for item hint/description elements
getItemTitleProps		Returns props for item title elements