Dropdown Menu

Overview

Profile

Settings ⌘S

Log out

Dropdown Menu is a floating panel triggered by a click — used for contextual actions, user account menus, and option lists. It supports icons, keyboard shortcuts, checkboxes, radio items, sub-menus, and separators.

Installation

npm install @araf-ds/core

yarn add @araf-ds/core

pnpm add @araf-ds/core

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
} from "@araf-ds/core"

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">My account</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>
          <UserIcon size={14} /> Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <SettingsIcon size={14} /> Settings
          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <LogOutIcon size={14} /> Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Variants

Basic with Icons and Shortcuts

My account

Log out ⇧⌘Q

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end" className="w-48">
    <DropdownMenuLabel>My account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <UserIcon size={14} /> Profile
      <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <StarIcon size={14} /> Billing
      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <BarChartIcon size={14} /> Settings
      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <LogOutIcon size={14} /> Log out
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Checkbox Items

Appearance

const [showStatusBar, setShowStatusBar] = useState(true)
const [showSidebar, setShowSidebar] = useState(true)

<DropdownMenuContent>
  <DropdownMenuLabel>Appearance</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuCheckboxItem
    checked={showStatusBar}
    onCheckedChange={setShowStatusBar}
  >
    Show status bar
  </DropdownMenuCheckboxItem>
  <DropdownMenuCheckboxItem
    checked={showSidebar}
    onCheckedChange={setShowSidebar}
  >
    Show sidebar
  </DropdownMenuCheckboxItem>
</DropdownMenuContent>

Edit

Duplicate

<DropdownMenuContent>
  <DropdownMenuItem><EditIcon size={14} /> Edit</DropdownMenuItem>
  <DropdownMenuItem><CopyIcon size={14} /> Duplicate</DropdownMenuItem>
  <DropdownMenuSub>
    <DropdownMenuSubTrigger>
      <ShareIcon size={14} /> Share
    </DropdownMenuSubTrigger>
    <DropdownMenuSubContent>
      <DropdownMenuItem>Email link</DropdownMenuItem>
      <DropdownMenuItem>Copy link</DropdownMenuItem>
      <DropdownMenuItem>Twitter</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuSub>
</DropdownMenuContent>

API Reference

DropdownMenu

boolean

Controlled open state.

(open: boolean) => void

Callback fired when open state changes.

boolean

default:"false"

Uncontrolled default open state.

DropdownMenuContent

string

default:"start"

Horizontal alignment relative to the trigger. Values: start · center · end

string

default:"bottom"

Which side to render on. Values: top · right · bottom · left

number

default:"4"

Distance in px between the trigger and the menu.

string

Additional class names for the menu panel.

DropdownMenuItem

string

default:"default"

Visual style. "destructive" renders item in red.

boolean

default:"false"

Disables the item — it becomes non-interactive and grayed out.

() => void

Callback fired when the item is selected. Menu closes automatically.

DropdownMenuCheckboxItem

boolean

Controlled checked state.

(checked: boolean) => void

Callback fired when checked state changes.

Accessibility

Dropdown menu uses role="menu" with aria-orientation="vertical"
Each item has role="menuitem" (or "menuitemcheckbox" / "menuitemradio")
Trigger has aria-haspopup="menu" and aria-expanded
Keyboard: Arrow keys navigate items, Enter/Space selects, Escape closes, Tab closes and moves focus
Sub-menus open on ArrowRight and close on ArrowLeft or Escape

Actions

Forms

Data Display

Feedback

Navigation

Layout

Charts

Icons

Overview

Installation

Usage

Variants

Basic with Icons and Shortcuts

With Checkbox Items

With Sub-menu

API Reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

Accessibility

Do’s & Don’ts

Do

Don't

​Overview

​Installation

​Usage

​Variants

​Basic with Icons and Shortcuts

​With Checkbox Items

​With Sub-menu

​API Reference

​DropdownMenu

​DropdownMenuContent

​DropdownMenuItem

​DropdownMenuCheckboxItem

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Variants

Basic with Icons and Shortcuts

With Checkbox Items

With Sub-menu

API Reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

Accessibility

Do’s & Don’ts