DropdownMenu
DropdownMenu
is a wrap overDropdown
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
DropdownProps & {...}
Property | Description |
---|---|
size DropdownMenuSize = m | 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
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
BoxProps & ScrollAreaProps & {...}
Property | Description |
---|---|
size DropdownMenuSize = m | 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 />;
DropdownMenuMenuProps
DropdownMenuListProps & {...}
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
FlexProps & {...}
Property | Description |
---|---|
selected boolean | Enables selected state |
disabled boolean | Disables the component |
highlighted boolean | Adds focus styles around |
notInteractive boolean | Makes the element non-interactive |
size DropdownMenuSize = m | Size of the component |
DropdownMenu.ItemTitle
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 />;
DropdownMenuItemTitleProps
FlexProps & {...}
Property | Description |
---|---|
size DropdownMenuSize = m | Size of the component |
DropdownMenu.ItemHint
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 />;
DropdownMenuItemHintProps
FlexProps & {...}
Property | Description |
---|---|
size DropdownMenuSize = m | Size of the component |
Context
Context of the component is available inside the render-function.
DropdownMenuContext
DropdownContext & {...}
Property | Description |
---|---|
highlightedIndex number | |
getListProps* | |
getItemProps* | |
getItemHintProps* | |
getItemTitleProps* |