Dropdown Menu

Guidelines
React API Reference
Blazor API Reference

Dropdown Menus display a list of actions or options when triggered by a button or other control. They provide a space-efficient way to present multiple choices without cluttering the interface.

Guidance

Aspect	Best Practice
Usage	Use dropdown menus for presenting a list of actions or options related to a specific context. Ideal for commands that don’t need constant visibility.
Content	Group similar items together. Use clear, concise labels. Include icons when helpful. Show keyboard shortcuts when applicable.
Behavior	Position appropriately near the trigger. Close on selection, escape key, or outside click. Support keyboard navigation through items.
States	Provide clear visual feedback for hover, focus, and disabled states. Clearly indicate checked states and submenus.
Feedback	Highlight items on hover/focus. Provide immediate visual feedback when an item is selected.
Examples	Application settings, user account options, content manipulation actions, or view controls.

Best Practices

Logical Organization: Group related items and separate groups with dividers when appropriate.
Consistent Positioning: Open in a predictable direction relative to the trigger (typically down and aligned to start or end).
Limited Depth: Avoid deeply nested submenus which can be difficult to navigate.
Descriptive Labels: Use clear, concise labels that indicate what the option does.
Accessibility: Ensure keyboard navigability and proper ARIA attributes for screen reader support.

Do’s and Don’ts

Do

Group related items together.
Provide keyboard navigation support.
Include visual indicators for checked or selected states.
Position menus to avoid obscuring important content.

Don't

Overload with too many options or deep nesting.
Use for primary navigation that should always be visible.
Rely solely on icons without labels unless meaning is universally clear.
Create inconsistent behaviors across different dropdowns.

Additional Guidance

Psychological Impact:
- Progressive Disclosure: Dropdown menus help manage complexity by showing options only when needed.
- Decision Management: Well-organized menus reduce cognitive load by grouping related choices.
- Interface Cleanliness: By hiding options until requested, dropdowns help maintain a cleaner, more focused interface.

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
  DropdownMenuSubContent
} from '@strongtie/design-system/dropdown-menu';

Usage

<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
  Open <MdKeyboardArrowDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
  <DropdownMenuItem>
    Profile
    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    Billing
    <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    Settings
    <DropdownMenuShortcut>⌘S</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 disabled>API</DropdownMenuItem>
<DropdownMenuItem>
  Log out
  <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

`<DropdownMenu>` 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

`<DropdownMenuTrigger>` Props

asChild

boolean

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

`<DropdownPortal>` 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.

`<DropdownMenuContent>`, `<DropdownMenuSubContent>` 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.

`<DropdownMenuItem>` 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.

`<DropdownMenuCheckboxItem>` 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

`<DropdownMenuRadioGroup>` 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.

`<DropdownMenuRadioItem>` 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

`<DropdownMenuSub>` 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.

`<DropdownMenuSubTrigger>` 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

`<DropdownMenuGroup>`, `<DropdownMenuLabel>`, `<DropdownMenuSeparator>` Props

asChild

boolean

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

Styling Classes

The following CSS classes are applied by the Dropdown Menu components:

dropdown-menu-content – Main dropdown container
dropdown-menu-sub-content – Sub-menu container
menu-item – Base menu item class
menu-item-sub-trigger – Sub-menu trigger item
menu-item-checkbox – Checkbox menu item
menu-item-radio – Radio menu item
menu-item-label – Menu label/header
menu-item-separator – Menu separator line
menu-item-shortcut – Keyboard shortcut display
menu-item-indicator – Checkbox/radio indicator wrapper
-inset – Inset modifier for indented items

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.

Styling Classes

The following CSS classes are applied by the Dropdown Menu components:

dropdown-menu – Base dropdown menu container
menu-trigger – Trigger button for the dropdown menu
menu-popup – Popup menu container
menu-item – Individual menu item wrapper
menu-item-label - Menu item label to indicate grouped menu items
menu-item-icon – Icon wrapper for menu items if property @DropdownMenuVariant is set
menu-item-text – Text wrapper for menu items if property @Text is not null
menu-item-content – Content wrapper for menu items
menu-submenu – Submenu container
menu-item-shortcut – Shortcut text for menu items
menu-item-submenu-icon – Icon for submenu trigger indicator

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Dropdown Menu

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<DropdownMenu>` Props

`<DropdownMenuTrigger>` Props

`<DropdownPortal>` Props

`<DropdownMenuContent>`, `<DropdownMenuSubContent>` Props

`<DropdownMenuItem>` Props

`<DropdownMenuCheckboxItem>` Props

`<DropdownMenuRadioGroup>` Props

`<DropdownMenuRadioItem>` Props

`<DropdownMenuSub>` Props

`<DropdownMenuSubTrigger>` Props

`<DropdownMenuGroup>`, `<DropdownMenuLabel>`, `<DropdownMenuSeparator>` Props

Styling Classes

`<StudsDropdownMenu>` Parameters

`<StudsDropdownMenuTrigger>` Parameters

`<StudsDropdownMenuContent>` Parameters

`<StudsDropdownMenuItem>` Parameters

`<StudsDropdownMenuLabel>` Parameters

`<StudsDropdownMenuSeperator>` Parameters

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<DropdownMenu> Props

​<DropdownMenuTrigger> Props

​<DropdownPortal> Props

​<DropdownMenuContent>, <DropdownMenuSubContent> Props

​<DropdownMenuItem> Props

​<DropdownMenuCheckboxItem> Props

​<DropdownMenuRadioGroup> Props

​<DropdownMenuRadioItem> Props

​<DropdownMenuSub> Props

​<DropdownMenuSubTrigger> Props

​<DropdownMenuGroup>, <DropdownMenuLabel>, <DropdownMenuSeparator> Props

​Styling Classes

​<StudsDropdownMenu> Parameters

​<StudsDropdownMenuTrigger> Parameters

​<StudsDropdownMenuContent> Parameters

​<StudsDropdownMenuItem> Parameters

​<StudsDropdownMenuLabel> Parameters

​<StudsDropdownMenuSeperator> Parameters

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<DropdownMenu>` Props

`<DropdownMenuTrigger>` Props

`<DropdownPortal>` Props

`<DropdownMenuContent>`, `<DropdownMenuSubContent>` Props

`<DropdownMenuItem>` Props

`<DropdownMenuCheckboxItem>` Props

`<DropdownMenuRadioGroup>` Props

`<DropdownMenuRadioItem>` Props

`<DropdownMenuSub>` Props

`<DropdownMenuSubTrigger>` Props

`<DropdownMenuGroup>`, `<DropdownMenuLabel>`, `<DropdownMenuSeparator>` Props

Styling Classes

`<StudsDropdownMenu>` Parameters

`<StudsDropdownMenuTrigger>` Parameters

`<StudsDropdownMenuContent>` Parameters

`<StudsDropdownMenuItem>` Parameters

`<StudsDropdownMenuLabel>` Parameters

`<StudsDropdownMenuSeperator>` Parameters

Styling Classes