Ariakit
/

All things Menu

Components

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.
MenubarRender a visually persistent menu similar to those found near the top of the window in desktop apps. This component is based on the WAI-ARIA Menubar Pattern.

Examples

Dialog with MenuShowing a nested dropdown Menu component inside a modal Dialog using React.
Menu with ComboboxCombining Menu and Combobox to create a dropdown menu with a search field that can be used to filter menu items.
Context menuShowing Menu when right-clicking on an element using the getAnchorRect prop to determine the position of the popover.
Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.
MenuItemCheckboxRendering a dropdown Menu using the MenuItemCheckbox component with the values and setValues props from MenuProvider to control the checked items.
MenuItemRadioRendering Menu using MenuItemRadio as children and the values prop from MenuProvider to control the checked item.
SubmenuRendering nested Menu components to create a dropdown menu with submenus that open when hovering over the parent menu item.
Sliding MenuRendering nested Menu components to create submenus that slide in and out using CSS Scroll Snap.
Menu with TooltipRendering Menu with a Tooltip that appears when hovering over the MenuButton component by combining it with the TooltipAnchor component.
Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

API Reference

useMenuBarStoreDeprecated: Use useMenubarStore instead.
useMenuBarContextDeprecated: Use useMenubarContext instead.
useMenuContextReturns the menu store from the nearest menu container.
useMenuStoreCreates a menu store.
MenuRenders a dropdown menu element.
MenuArrowRenders an arrow inside the menu element.
MenuBarDeprecated: Use Menubar instead.
MenuBarProviderDeprecated: Use MenubarProvider instead.
MenuButtonRenders a menu button that triggers a Menu component. Usually, this is rendered as a native button element, but if it's a submenu button rendered as a menu item inside another menu, it'll be rendered as a div.
MenuButtonArrowRenders an arrow pointing to the menu position, usually inside a MenuButton.
MenuDescriptionRenders a description in a menu. This component must be wrapped with Menu component so the aria-describedby prop is properly set on the menu element.
MenuDismissRenders a button that hides a menu.
MenuGroupRenders a menu group inside a menu.
MenuGroupLabelRenders a label in a menu group. This component must be wrapped with MenuGroup so the aria-labelledby prop is properly set on the menu group element.
MenuHeadingRenders a heading in a menu. This component must be wrapped with Menu so the aria-labelledby prop is properly set on the menu element.
MenuItemRenders a menu item.
MenuItemCheckRenders a checkmark inside a MenuItemCheckbox or MenuItemRadio components. This component must be wrapped with one of those components or the checked prop must be explicitly passed to the component.
MenuItemCheckboxRenders a menu item checkbox inside a menu.
MenuItemRadioRenders a menu item radio inside a menu.
MenuListRenders a menu list element.
MenuProviderProvides a menu store to Menu components.
MenuSeparatorRenders a separator for menu items.