Dropdown Menu

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

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  dropdownMenuContentClassname,
} = VM.require("uiisnear.near/widget/dropdownMenu");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <DropdownMenu>
    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</Tailwind>

API Reference

DropdownMenu

Contains all the parts of a dropdown menu.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---
modal	boolean	true
dir	enum	---

DropdownMenuTrigger

The button that toggles the dropdown menu. By default, the DropdownMenuContent will position itself against the trigger.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Present when disabled

DropdownMenuContent

The component that pops out when the dropdown menu is open.

Prop	Type	Default
loop	boolean	false
onCloseAutoFocus	function	---
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
side	enum	"bottom"
sideOffset	number	0
align	enum	"center"
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"
[data-orientation]	"vertical" \| "horizontal"

DropdownMenuItem

The component that contains the dropdown menu items.

Prop	Type	Default
disabled	boolean	---
onSelect	function	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-orientation]	"vertical" \| "horizontal"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

DropdownMenuGroup

Used to group multiple DropdownMenuItems.

DropdownMenuLabel

Used to render a label. It won't be focusable using arrow keys.

Prop	Type	Default
inset	boolean	---

DropdownMenuCheckboxItem

An item that can be controlled and rendered like a checkbox.

Prop	Type	Default
checked	boolean \| 'indeterminate'	---
onCheckedChange	function	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

DropdownMenuRadioGroup

Used to group multiple DropdownMenuRadioItems.

Prop	Type	Default
value	string	---
onValueChange	function	---

DropdownMenuRadioItem

An item that can be controlled and rendered like a radio.

Prop	Type	Default
value*	string	---
disabled	boolean	---
onSelect	function	---
textValue	string	---

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

DropdownMenuSeparator

Used to visually separate items in the dropdown menu.

DropdownMenuSub

Contains all the parts of a submenu.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---

DropdownMenuSubTrigger

An item that opens a submenu. Must be rendered inside DropdownMenuSub.

Prop	Type	Default
disabled	boolean	---
textValue	string	---
inset	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"
[data-highlighted]	Present when highlighted
[data-disabled]	Present when disabled

DropdownMenuSubContent

The component that pops out when a submenu is open. Must be rendered inside DropdownMenuSub.

Prop	Type	Default
loop	boolean	false
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
sideOffset	number	0
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"
[data-orientation]	"vertical" \| "horizontal"

Classnames

Classnames available to customize the component.

Function	Classname
DropdownMenuSubTrigger	dropdownMenuSubTriggerClassname
DropdownMenuSubContent	dropdownMenuSubContentClassname
DropdownMenuContent	dropdownMenuContentClassname
DropdownMenuItem	dropdownMenuItemClassname
DropdownMenuCheckboxItem	dropdownMenuCheckboxItemClassname
DropdownMenuRadioItem	dropdownMenuRadioItemClassname
DropdownMenuLabel	dropdownMenuLabelClassname
DropdownMenuSeparator	dropdownMenuSeparatorClassname
DropdownMenuShortcut	dropdownMenuShortcutClassname

Dialog Hover Card