edbnedbn/ui
Get Started
WelcomeWhy We're DifferentChoosing a VariantChangelogLicense
Components
OverviewAlert DialogCheckboxCollapsibleDialogFieldInputMenu
Number FieldPopoverProgressRadioScroll AreaSelectSeparatorSliderSwitchTabsToggleTooltip
Shared Components
InputTextareaCardAvatarTableAlertBreadcrumbPagination
0installs
Components
Maps
GitHub stars
HomeDocsComponentsStaticMenu

On this page

Menu

A dropdown menu component for displaying a list of actions or options. Built on Base UI Menu primitives.

Usage

import {
  MenuRoot,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuPopup,
  MenuItem,
  MenuSeparator,
} from "@/components/ui/static/menu"
<MenuRoot>
  <MenuTrigger>Open Menu</MenuTrigger>
  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuSeparator />
        <MenuItem>Item 3</MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</MenuRoot>

Installation

Install dependencies

TypeScript
npm install @base-ui/react @phosphor-icons/react

Examples

Basic

With Icons

Checkbox Items

Radio Items

API Reference

openboolean

Controlled open state of the menu.

onOpenChange(open: boolean) => void

Callback when open state changes.

disabledboolean

Whether the menu trigger is disabled.