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 "intergalactic/dropdown";
<DropdownMenu />;

DropdownMenuProps

& {...}

Name	Type	Description
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
inlineActions	boolean	Flag for menu that using as actions on DropdownMenu.Item

DropdownMenu.Trigger

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

import DropdownMenu from "intergalactic/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 "intergalactic/dropdown-menu";
<DropdownMenu.Popper />;

DropdownMenu.List

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

import DropdownMenu from "intergalactic/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 "intergalactic/dropdown-menu";
<DropdownMenu.Menu />;

DropdownMenu.Item

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

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

DropdownMenuItemProps

& {...}

Name	Type	Description
selected	boolean	Deprecated Enables selected state
disabled	boolean	Disables item
highlighted	boolean	Adds focus styles around
notInteractive	boolean	Deprecated Disables hover state
size		Size of the component

DropdownMenu.Item.Content

Content of menu item. Use it if you need Hints, Actions of nested menus.

import DropdownMenu from "intergalactic/dropdown-menu";
<DropdownMenu.Item.Content />;

DropdownMenuItemHintProps

& {...}

Name	Type	Description
size		Size of the component

Dropdown.Group

Group of interactive menu items.

import Dropdown from "intergalactic/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

DropdownMenu.Item.Hint

This non-interactive menu item is used to display tips in the list. Using as an aria-describedby for DropdownMenu.Item.

import DropdownMenu from "intergalactic/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
getListProps
getItemProps
getItemHintProps
getItemTitleProps

Deprecated

DropdownMenu.ItemTitle

WARNING

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

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 "intergalactic/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 non-interactive menu item is used to display tips in the list. It is a wrap over the Flex component.

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

DropdownMenuItemHintProps

& {...}

Name	Type	Description
size		Size of the component