Dropdown Menu

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.

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.

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.

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.

For more examples, visit the Storybook.

Example

<StudsDropdownMenu>
    <StudsDropdownMenuTrigger>Menu</StudsDropdownMenuTrigger>
    <StudsDropdownMenuContent>
        <StudsDropdownMenuLabel Text="Options"></StudsDropdownMenuLabel>
        <StudsDropdownMenuItem Text="Action" Shortcut="⇧⌘P"></StudsDropdownMenuItem>
        <StudsDropdownMenuItem Text="Another Action" Shortcut="⇧⌘M"></StudsDropdownMenuItem>
        <StudsDropdownMenuSeperator></StudsDropdownMenuSeperator>
        <StudsDropdownMenuItem Text="More Actions" Shortcut="⇧⌘A"></StudsDropdownMenuItem>
    </StudsDropdownMenuContent>
</StudsDropdownMenu>

`StudsDropdownMenu` Parameters

Variant

DropdownMenuVariant

default:"Default"

Gets or sets the variant style of the dropdown menu. Options include Default, Checkbox, and Radio.

Click

EventCallback<StudsDropdownMenuItem>

Gets or sets the callback that is invoked when a menu item is clicked.

SelectionChanged

EventCallback<IEnumerable<StudsDropdownMenuItem>>

Event fired when a selection changes in checkbox or radio mode.

ChildContent

RenderFragment

Gets or sets the child content.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsDropdownMenuTrigger` Parameters

ChildContent

RenderFragment

The content to be rendered inside the dropdown menu trigger.

`StudsDropdownMenuContent` Parameters

ChildContent

RenderFragment

Gets or sets the child content to be displayed within the dropdown menu.

`StudsDropdownMenuItem` Parameters

ChildContent

RenderFragment

Gets or sets the child content. When provided, the item becomes a submenu.

Text

string

Gets or sets the text displayed in the menu item.

Shortcut

string

Gets or sets the keyboard shortcut text displayed on the right side of the menu item.

Value

string

Gets or sets the value associated with the menu item.

IsSelected

bool

default:"false"

Gets or sets whether the item is selected. Used with Checkbox and Radio variants.

IsSelectedChanged

EventCallback<bool>

Event callback when the selection state changes.

OnClick

EventCallback<MouseEventArgs>

Gets or sets the custom click callback for the menu item.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsDropdownMenuLabel` Parameters

ChildContent

RenderFragment

Gets or sets the child content.

Text

string

Gets or sets the text for the label.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsDropdownMenuSeperator` Parameters

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Getting Started

Foundations

Components

Integration

Content

Dropdown Menu

`StudsDropdownMenu` Props

`StudsDropdownMenuTrigger` Props

`StudsDropdownPortal` Props

`StudsDropdownMenuContent`, `StudsDropdownMenuSubContent` Props

`StudsDropdownMenuItem` Props

`StudsDropdownMenuCheckboxItem` Props

`StudsDropdownMenuRadioGroup` Props

`StudsDropdownMenuRadioItem` Props

`StudsDropdownMenuSub` Props

`StudsDropdownMenuSubTrigger` Props

`StudsDropdownMenuGroup`, `StudsDropdownMenuLabel`, `StudsDropdownMenuSeparator` Props

`StudsDropdownMenu` Props

`StudsDropdownMenuTrigger` Props

`StudsDropdownPortal` Props

`StudsDropdownMenuContent`, `StudsDropdownMenuSubContent` Props

`StudsDropdownMenuItem` Props

`StudsDropdownMenuCheckboxItem` Props

`StudsDropdownMenuRadioGroup` Props

`StudsDropdownMenuRadioItem` Props

`StudsDropdownMenuSub` Props

`StudsDropdownMenuSubTrigger` Props

`StudsDropdownMenuGroup`, `StudsDropdownMenuLabel`, `StudsDropdownMenuSeparator` Props

`StudsDropdownMenu` Parameters

`StudsDropdownMenuTrigger` Parameters

`StudsDropdownMenuContent` Parameters

`StudsDropdownMenuItem` Parameters

`StudsDropdownMenuLabel` Parameters

`StudsDropdownMenuSeperator` Parameters

Getting Started

Foundations

Components

Integration

Content

​StudsDropdownMenu Props

​StudsDropdownMenuTrigger Props

​StudsDropdownPortal Props

​StudsDropdownMenuContent, StudsDropdownMenuSubContent Props

​StudsDropdownMenuItem Props

​StudsDropdownMenuCheckboxItem Props

​StudsDropdownMenuRadioGroup Props

​StudsDropdownMenuRadioItem Props

​StudsDropdownMenuSub Props

​StudsDropdownMenuSubTrigger Props

​StudsDropdownMenuGroup, StudsDropdownMenuLabel, StudsDropdownMenuSeparator Props

​StudsDropdownMenu Props

​StudsDropdownMenuTrigger Props

​StudsDropdownPortal Props

​StudsDropdownMenuContent, StudsDropdownMenuSubContent Props

​StudsDropdownMenuItem Props

​StudsDropdownMenuCheckboxItem Props

​StudsDropdownMenuRadioGroup Props

​StudsDropdownMenuRadioItem Props

​StudsDropdownMenuSub Props

​StudsDropdownMenuSubTrigger Props

​StudsDropdownMenuGroup, StudsDropdownMenuLabel, StudsDropdownMenuSeparator Props

​StudsDropdownMenu Parameters

​StudsDropdownMenuTrigger Parameters

​StudsDropdownMenuContent Parameters

​StudsDropdownMenuItem Parameters

​StudsDropdownMenuLabel Parameters

​StudsDropdownMenuSeperator Parameters

`StudsDropdownMenu` Props

`StudsDropdownMenuTrigger` Props

`StudsDropdownPortal` Props

`StudsDropdownMenuContent`, `StudsDropdownMenuSubContent` Props

`StudsDropdownMenuItem` Props

`StudsDropdownMenuCheckboxItem` Props

`StudsDropdownMenuRadioGroup` Props

`StudsDropdownMenuRadioItem` Props

`StudsDropdownMenuSub` Props

`StudsDropdownMenuSubTrigger` Props

`StudsDropdownMenuGroup`, `StudsDropdownMenuLabel`, `StudsDropdownMenuSeparator` Props

`StudsDropdownMenu` Props

`StudsDropdownMenuTrigger` Props

`StudsDropdownPortal` Props

`StudsDropdownMenuContent`, `StudsDropdownMenuSubContent` Props

`StudsDropdownMenuItem` Props

`StudsDropdownMenuCheckboxItem` Props

`StudsDropdownMenuRadioGroup` Props

`StudsDropdownMenuRadioItem` Props

`StudsDropdownMenuSub` Props

`StudsDropdownMenuSubTrigger` Props

`StudsDropdownMenuGroup`, `StudsDropdownMenuLabel`, `StudsDropdownMenuSeparator` Props

`StudsDropdownMenu` Parameters

`StudsDropdownMenuTrigger` Parameters

`StudsDropdownMenuContent` Parameters

`StudsDropdownMenuItem` Parameters

`StudsDropdownMenuLabel` Parameters

`StudsDropdownMenuSeperator` Parameters