edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
ComponentsBlocksMaps
HomeDocsComponentsStaticDropdown Menu

On this page

Dropdown Menu (Static)

A lightweight dropdown menu component with CSS animations. Perfect for navigation menus and action lists.

Overview

The static Dropdown Menu uses CSS animations for smooth transitions while avoiding the motion library dependency. Built on Radix UI for robust accessibility and positioning.

Looking for spring animations? Check out the Animated Dropdown Menu.

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/static/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

Install via CLI

TypeScript
npx edbn-ui add dropdown-menu-static

Install dependencies

TypeScript
npm install @radix-ui/react-dropdown-menu

Import and use

TypeScript
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/static/dropdown-menu"

export default function MyComponent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Examples

Basic Usage

A simple dropdown menu with items.

With Icons

Add icons to menu items for better visual hierarchy.

With Groups

Organize menu items into labeled groups.

API Reference

DropdownMenuContent

PropTypeDefaultDescription
align"start" | "center" | "end""center"Alignment relative to trigger
sideOffsetnumber4Distance from trigger in pixels
classNamestring—Additional CSS classes

DropdownMenuItem

PropTypeDefaultDescription
disabledbooleanfalseDisable the menu item
onSelect(event: Event) => void—Callback when item is selected

Accessibility

Built on Radix UI Dropdown Menu with full keyboard navigation.

↓ ↑Navigate between items
EnterSelect focused item
EscapeClose the menu