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 is 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
highlighted	boolean	Deprecated Adds focus styles around
notInteractive	boolean	Deprecated Disables hover state
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 />;

DropdownMenuItemHintProps

& {...}

Name	Type	Description
size		Size of the component

Dropdown.Group

Group of interactive menu items.

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

DropdownGroupProps

& {...}

Name	Type	Description
title	React.ReactNode	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 />;

DropdownMenuItemHintProps

& {...}

Name	Type	Description
size		Size of the component

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

Deprecated

DropdownMenu.ItemTitle

WARNING

The DropdownMenu.ItemTitle is deprecated, use DropdownMenu.Group instead.

This noninteractive menu item is used to display the titles in the list. It is a wrap over the Flex component.

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

DropdownMenuItemTitleProps

& {...}

Name	Type	Description
size		Size of the component

DropdownMenu.ItemHint

WARNING

The DropdownMenu.ItemHint is deprecated, use DropdownMenu.Item.Hint or DropdownMenu.Group with subTitle props instead.

This noninteractive menu item is used to display tips in the list. It is a wrap over the Flex component.

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

DropdownMenuItemHintProps

& {...}

Name	Type	Description
size		Size of the component