Component Library
Browse and explore components
Dropdown
A Dropdown is a UI component that reveals a list of options or actions when triggered.
Basic Dropdown
Component Code
import React from 'react'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
const BasicDropdownCode = () => {
return (
<>
<div className='flex flex-wrap items-center gap-3 mt-4'>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Dropdown Button</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='secondary'>Dropdown Button</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='warning'>Dropdown Button</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='error'>Dropdown Button</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
)
}
export default BasicDropdownCode
Dropdown With Radio Group
Component Code
import React from 'react'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
const DropdownWithRadioCode = () => {
const [position, setPosition] = React.useState('bottom')
return (
<>
<div className='flex flex-wrap items-center gap-3 mt-4'>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='outline'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}>
<DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='bottom'>
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='right'>Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='outlinesecondary'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}>
<DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='bottom'>
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='right'>Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='outlinewarning'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}>
<DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='bottom'>
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='right'>Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='outlineerror'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}>
<DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='bottom'>
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value='right'>Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
)
}
export default DropdownWithRadioCode
Dropdown With Checkbox
Component Code
'use client'
import { useState } from 'react'
import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
type Checked = DropdownMenuCheckboxItemProps['checked']
const DropdownMenuCheckboxesCode = () => {
const [showStatusBar, setShowStatusBar] = useState<Checked>(true)
const [showActivityBar, setShowActivityBar] = useState<Checked>(false)
const [showPanel, setShowPanel] = useState<Checked>(false)
return (
<>
<div className='flex flex-wrap items-center gap-3'>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='secondary'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='warning'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant='error'>Open Dropdown</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className='w-56'>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
)
}
export default DropdownMenuCheckboxesCode