Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

DropdownMenu

Action menus with keyboard navigation, checkbox choices and destructive actions.

CoreOverlays & Menus@gaudi/design-system/core/DropdownMenuView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import DropdownMenu from '@gaudi/design-system/core/DropdownMenu';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/context-menu-in-dialog.json.

Usage

import DropdownMenu, { DropdownMenuItem } from '@gaudi/design-system/core/DropdownMenu';import Button from '@gaudi/design-system/core/Button';
<DropdownMenu trigger={<Button variant='outline'>Document actions</Button>}>  <DropdownMenuItem onSelect={duplicate}>Duplicate</DropdownMenuItem>  <DropdownMenuItem onSelect={archive}>Archive</DropdownMenuItem></DropdownMenu>

Examples

Context menu inside a dialog

Storybook

Context menu

Storybook

Account and create menus

Storybook

Item kinds

Storybook

Notifications

Storybook

Side and alignment

Storybook

Workspace and model switchers

Storybook

Application menubar

Storybook

API

9 props

Accessibility

Arrow keys navigate items; Escape closes and returns focus. Use menu items for actions and links for navigation.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesTabsSwitch between related panels with keyboard-accessible tab controls.3 examplesPillPill renders compact category and status labels.4 examplesSeparatorSeparate related content with a horizontal or vertical rule.3 examples