For more examples, visit the Storybook.
Example
<StudsDropdownMenu>
  <StudsDropdownMenuTrigger asChild>
    <StudsButton variant="outline">
      Open <MdKeyboardArrowDown />
    </StudsButton>
  </StudsDropdownMenuTrigger>
  <StudsDropdownMenuContent>
    <StudsDropdownMenuLabel>My Account</StudsDropdownMenuLabel>
    <StudsDropdownMenuSeparator />
    <StudsDropdownMenuGroup>
      <StudsDropdownMenuItem>
        Profile
        <StudsDropdownMenuShortcut>⇧⌘P</StudsDropdownMenuShortcut>
      </StudsDropdownMenuItem>
      <StudsDropdownMenuItem>
        Billing
        <StudsDropdownMenuShortcut>⌘B</StudsDropdownMenuShortcut>
      </StudsDropdownMenuItem>
      <StudsDropdownMenuItem>
        Settings
        <StudsDropdownMenuShortcut>⌘S</StudsDropdownMenuShortcut>
      </StudsDropdownMenuItem>
    </StudsDropdownMenuGroup>
    <StudsDropdownMenuSeparator />
    <StudsDropdownMenuGroup>
      <StudsDropdownMenuItem>Team</StudsDropdownMenuItem>
      <StudsDropdownMenuSub>
        <StudsDropdownMenuSubTrigger>
          Invite users
        </StudsDropdownMenuSubTrigger>
        <StudsDropdownMenuPortal>
          <StudsDropdownMenuSubContent>
            <StudsDropdownMenuItem>Email</StudsDropdownMenuItem>
            <StudsDropdownMenuItem>Message</StudsDropdownMenuItem>
            <StudsDropdownMenuSeparator />
            <StudsDropdownMenuItem>More...</StudsDropdownMenuItem>
          </StudsDropdownMenuSubContent>
        </StudsDropdownMenuPortal>
      </StudsDropdownMenuSub>
      <StudsDropdownMenuItem>
        New Team
        <StudsDropdownMenuShortcut>⌘+T</StudsDropdownMenuShortcut>
      </StudsDropdownMenuItem>
    </StudsDropdownMenuGroup>
    <StudsDropdownMenuSeparator />
    <StudsDropdownMenuItem disabled>API</StudsDropdownMenuItem>
    <StudsDropdownMenuItem>
      Log out
      <StudsDropdownMenuShortcut>⇧⌘Q</StudsDropdownMenuShortcut>
    </StudsDropdownMenuItem>
  </StudsDropdownMenuContent>
</StudsDropdownMenu>

​
StudsDropdownMenu Props

​
defaultOpen
boolean
The open state of the dropdown menu when it is initially rendered.
​
open
boolean
The controlled open state of the dropdown menu.
​
onOpenChange
function
Event handler called when the open state of the dropdown menu changes.
​
modal
boolean
default:"true"
The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
​
dir
"ltr" | "rtl"
The reading direction of submenus when applicable

​
StudsDropdownMenuTrigger Props

​
asChild
boolean
If true, the component will render as a child of the parent component.

​
StudsDropdownPortal Props

​
container
HTMLElement
default:"document.body"
The container element to which the dropdown menu will be appended.
​
forceMount
boolean
If true, the dropdown menu will be mounted to the container regardless of its position in the DOM.

​
StudsDropdownMenuContent, StudsDropdownMenuSubContent Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
loop
boolean
default:"false"
If true, the dropdown menu will loop when navigating with arrow keys.
​
onCloseAutoFocus
function
Event handler called when the dropdown menu is closed and focus is returned to the trigger.
​
onEscapeKeyDown
function
Event handler called when the escape key is pressed while the dropdown menu is open.
​
onPointerDownOutside
function
Event handler called when a pointer is pressed outside the dropdown menu.
​
onFocusOutside
function
Event handler called when focus is moved outside the dropdown menu.
​
onInteractOutside
function
Event handler called when interaction occurs outside the dropdown menu.
​
forceMount
boolean
If true, the dropdown menu will be mounted to the container
​
side
"top" | "right" | "bottom" | "left"
default:"bottom"
The side of the trigger where the dropdown menu will be positioned.
​
sideOffset
number
default:"4"
The distance in pixels from the trigger.
​
align
"start" | "center" | "end"
default:"start"
The preferred alignment against the trigger.
​
alignOffset
number
default:"0"
The distance in pixels from the trigger.
​
avoidCollisions
boolean
default:"true"
If true, the dropdown menu will avoid collisions with the viewport.
​
collisionBoundary
Boundary
default:"[]"
The boundary element to which the dropdown menu will be constrained.
​
collisionPadding
number | Padding
default:"0"
The padding in pixels to be applied to the collision boundary.
​
arrowPadding
number
default:"0"
The padding in pixels to be applied to the arrow element.
​
sticky
"partial" | "always"
default:"partial"
If true, the dropdown menu will be sticky to the viewport.
​
hideWhenDetached
boolean
default:"false"
If true, the dropdown menu will be hidden when it is detached from the trigger.

​
StudsDropdownMenuItem Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
onSelect
function
Event handler called when the item is selected.
​
textValue
string
Optional text used for typeahead purposes
​
inset
boolean
Whether to render the item with indentation to account for the presence of a checkbox or radio indicator.
​
disabled
boolean
When true, prevents the user from interacting with the item.

​
StudsDropdownMenuCheckboxItem Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
checked
boolean
The controlled checked state of the item.
​
onCheckedChange
function
Event handler called when the checked state changes.
​
disabled
boolean
When true, prevents the user from interacting with the item.
​
onSelect
function
Event handler called when the item is selected.
​
textValue
string
Optional text used for typeahead purposes

​
StudsDropdownMenuRadioGroup Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
value
string
The value of the selected item in the group.
​
onValueChange
function
Event handler called when the value changes.

​
StudsDropdownMenuRadioItem Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
value
string
The unique value of the item.
​
disabled
boolean
When true, prevents the user from interacting with the item.
​
onSelect
function
Event handler called when the item is selected.
​
textValue
string
Optional text used for typeahead purposes

​
StudsDropdownMenuSub Props

​
defaultOpen
boolean
The open state of the submenu when it is initially rendered.
​
open
boolean
The controlled open state of the submenu.
​
onOpenChange
function
Event handler called when the open state of the submenu changes.

​
StudsDropdownMenuSubTrigger Props

​
asChild
boolean
If true, the component will render as a child of the parent component.
​
inset
boolean
Whether to render the trigger with indentation.
​
disabled
boolean
When true, prevents the user from interacting with the trigger.
​
textValue
string
Optional text used for typeahead purposes

​
StudsDropdownMenuGroup, StudsDropdownMenuLabel, StudsDropdownMenuSeparator Props

​
asChild
boolean
If true, the component will render as a child of the parent component.