Dropdown Menu

Displays a list of options to the user — triggered by a button — that allows them to make a selection.

Preview & Interactive Laboratory

Standard Configuration
Premium Glass Hub

Usage & Implementation

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

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent variant="glass">
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
React / Tailwind

Granular Customization

1

Content

The floating menu panel.

className={`variant='glass' align='start'|'end'|'center'`}
2

Item

Individual menu options.

className={`variant='default' | 'destructive'`}
3

Sub Menu

Nested levels of navigation.

className={`DropdownMenuSubContent`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'glass''default'The visual style of the menu panel.
align'start' | 'end' | 'center''start'Alignment relative to the trigger.
sideOffsetnumber4Distance from the trigger.