Dropdown menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/dropdown-menu

Lineage

Spoke

Anatomy

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

export default () => (
	<DropdownMenu>
		<DropdownMenuTrigger />
		<DropdownMenuContent>
			<DropdownMenuItem />
		</DropdownMenuContent>
	</DropdownMenu>
)

Spoke utility classes

Class	Fallback chain	Description
`--dropdown-menu-content`	`var(--popover)`	Colour for menu content dropdown variant
`--dropdown-menu-content-foreground`	`var(--popover-foreground)`	Text/icon colour for menu content dropdown variant
`--dropdown-menu-border`	`var(--border)`	Border colour for menu dropdown variant
`--dropdown-menu-radius`	`var(--radius-md)`	Border radius for menu
`--shadow-dropdown-menu`	`var(--shadow-md)`	Box shadow for dropdown menu