Skip to content

DropdownMenu

Components
3.6.25

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

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

import DropdownMenu from '@semcore/ui/dropdown';
<DropdownMenu />;
interface
IDropdownMenuProps extends IDropdownProps
PropertyDescription
size

Size of the menu

defaultHighlightedIndex
number

Index of the element selected by default

highlightedIndex
number

Index of the selected item

onHighlightedIndexChange
(highlightedIndex: number) => void

Callback for highlightedIndex change highlightedIndex - Index of the selected item

locale
string

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 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 is a container component for the list items with the <ScrollArea/> inside it.

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.List />;
interface
IDropdownMenuListProps extends IBoxProps, IScrollAreaProps
PropertyDescription
size

Size of the 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 />;
interface
IDropdownMenuMenuProps extends IDropdownMenuListProps

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

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;
interface
IDropdownMenuItemProps extends IFlexProps
PropertyDescription
selected
boolean

Enables selected state

disabled
boolean

Disables the component

highlighted
boolean

Adds focus styles around

notInteractive
boolean

Makes the element non-interactive

size

Size of the component

This non-interactive 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 />;
interface
IDropdownMenuItemTitleProps extends IFlexProps
PropertyDescription
size

Size of the component

This non-interactive 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 />;
interface
IDropdownMenuItemHintProps extends IFlexProps
PropertyDescription
size

Size of the component

Context

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

interface
IDropdownMenuContext extends IDropdownContext
PropertyDescription
getListProps*
getItemProps*
getItemHintProps*
getItemTitleProps*