Skip to content

DropdownMenu

Components4.9.2

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 />;
typeDropdownMenuProps
DropdownProps & {...}
PropertyDescription

Size of the menu

number

Index of the element selected by default

number

Index of the selected item

(highlightedIndex: number) => void

Callback for highlightedIndex change highlightedIndex - Index of the selected item

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 />;
typeDropdownMenuListProps
BoxProps & ScrollAreaProps & {...}
PropertyDescription

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 />;
typeDropdownMenuMenuProps
DropdownMenuListProps & {...}

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

import DropdownMenu from '@semcore/ui/dropdown-menu';
<DropdownMenu.Item />;
typeDropdownMenuItemProps
FlexProps & {...}
PropertyDescription
boolean

Enables selected state

boolean

Disables the component

boolean

Adds focus styles around

boolean

Makes the element non-interactive

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 />;
typeDropdownMenuItemTitleProps
FlexProps & {...}
PropertyDescription

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 />;
typeDropdownMenuItemHintProps
FlexProps & {...}
PropertyDescription

Size of the component

Context

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

typeDropdownMenuContext
DropdownContext & {...}
PropertyDescription
number