Skip to content

DropdownMenu

TIP

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/>.

jsx
import DropdownMenu from 'intergalactic/dropdown';
<DropdownMenu />;
import DropdownMenu from 'intergalactic/dropdown';
<DropdownMenu />;

DropdownMenuProps

& {...}
NameTypeDescription
size Size of the menu
defaultHighlightedIndexnumber Index of the element selected by default
highlightedIndexnumber Index of the selected item
onHighlightedIndexChange(highlightedIndex: number) => void Callback for highlightedIndex change highlightedIndex - Index of the selected item
localestring

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

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Trigger />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Trigger />;

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

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Popper />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Popper />;

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

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.List />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.List />;

DropdownMenuListProps

& & {...}
NameTypeDescription
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.

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Menu />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Menu />;

DropdownMenuMenuProps

& {...}

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

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Item />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.Item />;

DropdownMenuItemProps

& {...}
NameTypeDescription
selectedboolean Enables selected state
disabledboolean Disables item
highlightedboolean Adds focus styles around
notInteractivebooleanDeprecated Disables hover state
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.

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.ItemTitle />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.ItemTitle />;

DropdownMenuItemTitleProps

& {...}
NameTypeDescription
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.

jsx
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.ItemHint />;
import DropdownMenu from 'intergalactic/dropdown-menu';
<DropdownMenu.ItemHint />;

DropdownMenuItemHintProps

& {...}
NameTypeDescription
size Size of the component

Context

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

DropdownMenuContext

& {...}
NameTypeDescription
highlightedIndexnumber
getListProps
getItemProps
getItemHintProps
getItemTitleProps

Released under the MIT License.

Released under the MIT License.