Dropdown Menu

Displays a menu to the user triggered by a button or other element.

Dropdown Menu

import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/optics/dropdown-menu";import { Button } from "@/components/optics/button";<DropdownMenu>  <DropdownMenuTrigger render={<Button variant="raised">Open Menu</Button>} />  <DropdownMenuContent    align="start"    className="w-56"  >    <DropdownMenuLabel>      My Account    </DropdownMenuLabel>    <DropdownMenuGroup>      <DropdownMenuItem>        Profile        <DropdownMenuShortcut>          ⇧⌘P        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Billing        <DropdownMenuShortcut>          ⌘B        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Settings        <DropdownMenuShortcut>          ⌘S        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Keyboard shortcuts        <DropdownMenuShortcut>          ⌘K        </DropdownMenuShortcut>      </DropdownMenuItem>    </DropdownMenuGroup>    <DropdownMenuSeparator />    <DropdownMenuGroup>      <DropdownMenuItem>        Team      </DropdownMenuItem>      <DropdownMenuSub>        <DropdownMenuSubTrigger>          Invite users        </DropdownMenuSubTrigger>        <DropdownMenuPortal>          <DropdownMenuSubContent>            <DropdownMenuItem>              Email            </DropdownMenuItem>            <DropdownMenuItem>              Message            </DropdownMenuItem>            <DropdownMenuSeparator />            <DropdownMenuItem>              More...            </DropdownMenuItem>          </DropdownMenuSubContent>        </DropdownMenuPortal>      </DropdownMenuSub>      <DropdownMenuItem>        New Team        <DropdownMenuShortcut>          ⌘+T        </DropdownMenuShortcut>      </DropdownMenuItem>    </DropdownMenuGroup>    <DropdownMenuSeparator />    <DropdownMenuItem>      GitHub    </DropdownMenuItem>    <DropdownMenuItem>      Support    </DropdownMenuItem>    <DropdownMenuItem disabled>      API    </DropdownMenuItem>    <DropdownMenuSeparator />    <DropdownMenuItem>      Log out      <DropdownMenuShortcut>        ⇧⌘Q      </DropdownMenuShortcut>    </DropdownMenuItem>  </DropdownMenuContent></DropdownMenu>

import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/optics/dropdown-menu";import { Button } from "@/components/optics/button";<DropdownMenu>  <DropdownMenuTrigger render={<Button variant="raised">Open Menu</Button>} />  <DropdownMenuContent    align="start"    className="w-56"  >    <DropdownMenuLabel>      My Account    </DropdownMenuLabel>    <DropdownMenuGroup>      <DropdownMenuItem>        Profile        <DropdownMenuShortcut>          ⇧⌘P        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Billing        <DropdownMenuShortcut>          ⌘B        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Settings        <DropdownMenuShortcut>          ⌘S        </DropdownMenuShortcut>      </DropdownMenuItem>      <DropdownMenuItem>        Keyboard shortcuts        <DropdownMenuShortcut>          ⌘K        </DropdownMenuShortcut>      </DropdownMenuItem>    </DropdownMenuGroup>    <DropdownMenuSeparator />    <DropdownMenuGroup>      <DropdownMenuItem>        Team      </DropdownMenuItem>      <DropdownMenuSub>        <DropdownMenuSubTrigger>          Invite users        </DropdownMenuSubTrigger>        <DropdownMenuPortal>          <DropdownMenuSubContent>            <DropdownMenuItem>              Email            </DropdownMenuItem>            <DropdownMenuItem>              Message            </DropdownMenuItem>            <DropdownMenuSeparator />            <DropdownMenuItem>              More...            </DropdownMenuItem>          </DropdownMenuSubContent>        </DropdownMenuPortal>      </DropdownMenuSub>      <DropdownMenuItem>        New Team        <DropdownMenuShortcut>          ⌘+T        </DropdownMenuShortcut>      </DropdownMenuItem>    </DropdownMenuGroup>    <DropdownMenuSeparator />    <DropdownMenuItem>      GitHub    </DropdownMenuItem>    <DropdownMenuItem>      Support    </DropdownMenuItem>    <DropdownMenuItem disabled>      API    </DropdownMenuItem>    <DropdownMenuSeparator />    <DropdownMenuItem>      Log out      <DropdownMenuShortcut>        ⇧⌘Q      </DropdownMenuShortcut>    </DropdownMenuItem>  </DropdownMenuContent></DropdownMenu>

Installation

pnpm dlx shadcn@latest add @optics/dropdown-menu

Props

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
align	string(default: start)
alignOffset	number(default: 0)
side	string(default: bottom)
sideOffset	number(default: 4)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
variant	string(default: default)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
inset	boolean(default: false)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sideOffset	number
alignOffset	number
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Name	Type
align	string(default: start)
alignOffset	number(default: -3)
side	string(default: right)
sideOffset	number(default: 0)
defaultOpen	boolean
loopFocus	boolean
highlightItemOnHover	boolean
modal	boolean
onOpenChange	(...args) => void
onOpenChangeComplete	((open: boolean) => void)
open	boolean
closeParentOnEsc	boolean
triggerId	string
defaultTriggerId	string
render	React.ReactElement
onCheckedChange	(...args) => void
label	string
closeOnClick	boolean
nativeButton	boolean
keepMounted	boolean
finalFocus	boolean \| HTMLElement
container	HTMLElement \| RefObject<HTMLElement>
anchor	(...args) => Element
positionMethod	"absolute" \| "fixed"
sticky	boolean
arrowPadding	number
disableAnchorTracking	boolean
onValueChange	(...args) => void
payload	object
delay	number
closeDelay	number
openOnHover	boolean

Drawer Empty

Dropdown Menu

Show Code

Installation

Props

Show LessShow More