Installation

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/dropdown-menu.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/dropdown-menu.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Install by hand

1. Add the packages
pnpm add @base-ui/react@^1
2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/notchset/dropdown-menu.tsx
- lib/beautiful-ui/notchset/menu.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
3. No stylesheet needed.
4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

Usage

Import it and pass your content. The props that matter most are listed next.

Example

"use client";

import { DropdownMenu, DropdownMenuContent, DropdownMenuHeader, DropdownMenuHoldItem, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/notchset/dropdown-menu";

export function RunActions({ runId, onOpenTrace, onDelete }: { runId: string; onOpenTrace: () => void; onDelete: () => void }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger label="Run actions" kbd="⌘." />
      <DropdownMenuContent>
        <DropdownMenuHeader title={runId} meta="Planner v14 · 2.1s" />
        <DropdownMenuItem onClick={onOpenTrace}>
          Open trace<DropdownMenuShortcut>T</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuHoldItem onConfirm={onDelete}>Delete run</DropdownMenuHoldItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

DropdownMenuTrigger label / kbd–
string
Optional: the Notchset outline key with a kbd box and chevron. Without label it is shadcn's bare trigger.
DropdownMenuContent side / align / sideOffset–
as shadcn
Default bottom, start, 9px.
DropdownMenuHeader title / meta–
ReactNode
The identity header at the top of the menu.
DropdownMenuItem variant–
"default" | "destructive"
As shadcn.
DropdownMenuHoldItem holdMs / onConfirm / labels–
number / () => void / { holding, done }
Hold to delete, 1200ms by default; release cancels.
DropdownMenuShortcut / DropdownMenuMeta–
span
A kbd box, or a muted reading, at the row's end.

Source

components/ui/notchset/dropdown-menu.tsx

Overlays Notchset

Dropdown MenuFreev1.0.0

shadcn's Dropdown Menu in Notchset: it unfolds under a leader line, one field block glides to the highlighted row as a focus dot scales in, checks trace and radios bloom, submenus open sideways, and a hold-to-delete row fills with signal.

Built on shadcn/ui

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/dropdown-menu.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/dropdown-menu.json

Install by hand

1. Add the packages
pnpm add @base-ui/react@^1
2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/notchset/dropdown-menu.tsx
- lib/beautiful-ui/notchset/menu.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
3. No stylesheet needed.
4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)

Styles didn't apply?

Props

DropdownMenuTrigger label / kbd–
string
Optional: the Notchset outline key with a kbd box and chevron. Without label it is shadcn's bare trigger.
DropdownMenuContent side / align / sideOffset–
as shadcn
Default bottom, start, 9px.
DropdownMenuHeader title / meta–
ReactNode
The identity header at the top of the menu.
DropdownMenuItem variant–
"default" | "destructive"
As shadcn.
DropdownMenuHoldItem holdMs / onConfirm / labels–
number / () => void / { holding, done }
Hold to delete, 1200ms by default; release cancels.
DropdownMenuShortcut / DropdownMenuMeta–
span
A kbd box, or a muted reading, at the row's end.

Anatomy

Same exports and parts as shadcn's Dropdown Menu, plus Header, HoldItem and Meta.
Base UI and Radix builds: your components.json picks one.
The Notchset instrument parts: node, check, glyph flip; sounds through beautiful-ui-sound.

DropdownMenuContentdata-slot="dropdown-menu-content"
The popup.
DropdownMenuItemdata-slot="dropdown-menu-item"
A row.
DropdownMenuHeaderdata-slot="dropdown-menu-header"
The identity header.
Highlightdata-slot="dropdown-menu-highlight"
The gliding field block.
DropdownMenuHoldItemdata-slot="dropdown-menu-hold-item"
Hold to delete.

Changelog

v1.0.0 · 2026-10-02All 1 entries

v1.0.0 · 2026-10-02
First release, from the Notchset 1.3 handoff

When not to use

Choosing a value in a form: use Select
Navigation: use a nav or tabs

Accessibility

The Base UI or Radix menu: roles, roving focus, type-ahead, Esc returns focus to the trigger
Checkbox and radio rows are menuitemcheckbox / menuitemradio
Disabled rows are announced as disabled (Base UI keeps them focusable, Radix skips them); the hold row's name says to hold

Motion

Open: The leader drops (120ms); the menu unfolds (grid rows, 420ms, 100ms delay); rows settle in 22ms apart
Highlight: One field block glides to the row (170ms cubic-bezier(.2,0,0,1)); the focus dot scales in (220ms); signal tint on a destructive row
Marks: Checks trace in 220ms; radio dots bloom to r 2 in 320ms
Submenu: A sideways leader and an unfold (grid columns, 340ms), after 120ms of hover intent

Performance

The popup mounts only while open; one highlight block glides between rows (top and height, 170ms).
Row staggers are CSS animation delays, not timers.

Responsive

The list keeps 8px inside the viewport, flips when it must, and scrolls within the room it has.
Rows grow to 44px on touch screens.

Keyboard

Enter / Space / ↓: Open from the trigger
↑ ↓ / Home / End: Move
A–Z: Jump to a row
→ / ←: Open or close a submenu
Esc: Close and return focus
Enter or Space (held): Hold to delete

Notes for AI

Give your coding assistant the Markdown guide instead of screenshots.

Keep DropdownMenuContent's first child the header or an item: the leader meets the top edge
Hold rows don't close the menu: close it in onConfirm if you want

/md/dropdown-menu.md

63 more Pro pieces in NotchsetEvery Pro component and chart in the same language. Previews are live for everyone; the code comes with Pro.See the plans