Back to Components
Navigation
Dropdown Menu
Contextual menu with keyboard navigation and nested submenus.
PropsUsage ExampleVariations
Dependencies
- clsx
- tailwind-merge
- @radix-ui/react-dropdown-menu
Files
- components/ui/dropdown-menu.tsx
Installation
Using shadcn CLI
npx shadcn add dropdown-menu --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge @radix-ui/react-dropdown-menuRelated Navigation Components
Accordion
Collapsible sections with smooth height animation and accessible controls.
Bottom Nav Bar
Mobile-style bottom navigation with icons, labels, and active state.
Breadcrumb Dropdown
Breadcrumbs with an overflow dropdown for deep navigation paths.
Breadcrumb Trail
Animated breadcrumbs with an overflow dropdown for longer navigation paths.
Breadcrumbs
Navigation breadcrumbs with separators, current page styling, and optional collapse.
Collapsible
Expandable content section with animated open/close transitions.