Dropdown

Reveal additional actions or content

Source Code Radix

Installation


pnpm dlx radianui@latest add dropdown

Usage

Imports

/components/ui/dropdown.tsx

import {
	Dropdown,
	DropdownContent,
	DropdownItem,
	DropdownSub,
	DropdownSubContent,
	DropdownSubTrigger,
	DropdownTrigger,
} from "@/components/ui/dropdown"

Code

/components/ui/dropdown.tsx

<Dropdown>
	<DropdownTrigger asChild>
		<Button variant="outline">Open Menu</Button>
	</DropdownTrigger>
	<DropdownContent>
		<DropdownGroup title="Actions" selectionMode="single">
			<DropdownItem value="new">New File</DropdownItem>
			<DropdownItem value="open">Open File</DropdownItem>
			<DropdownItem value="save">Save</DropdownItem>
		</DropdownGroup>
	</DropdownContent>
</Dropdown>

Examples

With Checkbox

With Radio Group

Props

Name	Default	Values
indicatorPosition	right	leftright
indicator	null	ReactNode
External Reference	-	-

Name	Default	Values
asChild	true	boolean
External Reference	-	-

Name	Default	Values
placement	bottom	topbottomleftright
align	start	startcenterend
External Reference	-	-

Name	Default	Values
inset	false	boolean
External Reference	-	-