DropdownMenu
A menu that appears on click, typically used for contextual actions
Divergence from Blok
Reduced sub-component set compared to Blok's Radix-based menu. Blok exports DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, and DropdownMenuPortal in addition to the standard items. We don't currently ship these — use a regular DropdownMenuItem with your own check/radio state management if you need toggle behaviour. The core pieces (DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuShortcut, and nested DropdownMenuSub/DropdownMenuSubTrigger/DropdownMenuSubContent) all match Blok's composition. No keyboard navigation (arrows / Enter / Esc) — Blok gets that via Radix.
Examples
Default
With click handlers
With Submenu
With Shortcuts and Icons
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| DropdownMenu | Root state container. Tracks open state and the anchor coordinate so DropdownMenuContent can render below the trigger button. |
| DropdownMenuTrigger | Click target that toggles the parent menu. Registers its bounding rect so the content can position itself below. |
| DropdownMenuContent | Positioned menu surface. Renders relative to the trigger using smart collision-avoidance (matching Blok's Radix avoidCollisions default). A full-viewport backdrop closes the menu on outside click. |
| DropdownMenuLabel | Non-interactive heading row inside a menu. Rendered in uppercase muted text. |
| DropdownMenuGroup | Logical grouping wrapper around a set of items. Renders a role="group" <div> with no visual separator — use DropdownMenuSeparator for that. |
| DropdownMenuItem | Clickable menu row. On click, fires Click and then closes every ancestor menu (including DropdownMenuSub and ContextMenu) so the whole chain dismisses. |
| DropdownMenuSeparator | 1px horizontal divider between groups or individual items. |
| DropdownMenuShortcut | Right-aligned keyboard-hint label placed inside a DropdownMenuItem. Rendered in small, tracked, muted text. |
| DropdownMenuSub | Nested submenu state container. Tracks hover open/close and the trigger bounds so DropdownMenuSubContent can position itself with collision avoidance. |
| DropdownMenuSubTrigger | Hover-activated submenu opener. Displays a right chevron and opens the parent DropdownMenuSub on mouseenter. |
| DropdownMenuSubContent | Submenu surface. Renders relative to its trigger with collision avoidance; closes on mouseleave. |
DropdownMenu
Root state container. Tracks open state and the anchor coordinate so DropdownMenuContent can render below the trigger button.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one DropdownMenuTrigger and one DropdownMenuContent. |
DropdownMenuTrigger
Click target that toggles the parent menu. Registers its bounding rect so the content can position itself below.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <button>. | |
| ChildContent | RenderFragment? | Trigger content — typically a Button. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <button>. |
DropdownMenuContent
Positioned menu surface. Renders relative to the trigger using smart collision-avoidance (matching Blok's Radix avoidCollisions default). A full-viewport backdrop closes the menu on outside click.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | DropdownMenuSide | Preferred opening side relative to the trigger. Default: Bottom. Flips to the opposite side when the preferred side overflows the viewport. Other values: Top, Left, Right. | |
| Align | DropdownMenuAlign | Alignment of the menu along the trigger's cross-axis. Default: Start. Other values: Center, End. | |
| SideOffset | double | Gap in pixels between trigger and menu surface. Default: 4 (matches Blok's explicit default). | |
| ClassName | string? | Extra CSS classes appended to the menu surface. | |
| ChildContent | RenderFragment? | Menu items — DropdownMenuItem, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSeparator, nested DropdownMenuSub. |
DropdownMenuLabel
Non-interactive heading row inside a menu. Rendered in uppercase muted text.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the label <div>. | |
| ChildContent | RenderFragment? | Heading text. |
DropdownMenuGroup
Logical grouping wrapper around a set of items. Renders a role="group" <div> with no visual separator — use DropdownMenuSeparator for that.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the group <div>. | |
| ChildContent | RenderFragment? | DropdownMenuItem children belonging to this group. |
DropdownMenuItem
Clickable menu row. On click, fires Click and then closes every ancestor menu (including DropdownMenuSub and ContextMenu) so the whole chain dismisses.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | DropdownMenuItemVariant | Visual style. Default: DropdownMenuItemVariant.Default. Other value: Destructive (red hover + destructive bg tint). | |
| Disabled | bool | When true, the item is muted and ignores clicks. Default: false. | |
| Click | EventCallback | Invoked when the item is clicked, before the menu chain closes. | |
| ClassName | string? | Extra CSS classes appended to the item <div>. | |
| ChildContent | RenderFragment? | Item label and optional Icon / DropdownMenuShortcut children. |
DropdownMenuSeparator
1px horizontal divider between groups or individual items.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator <div>. |
DropdownMenuShortcut
Right-aligned keyboard-hint label placed inside a DropdownMenuItem. Rendered in small, tracked, muted text.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <span>. | |
| ChildContent | RenderFragment? | Shortcut text (e.g. Ctrl+X). |
DropdownMenuSub
Nested submenu state container. Tracks hover open/close and the trigger bounds so DropdownMenuSubContent can position itself with collision avoidance.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Should contain one DropdownMenuSubTrigger and one DropdownMenuSubContent. |
DropdownMenuSubTrigger
Hover-activated submenu opener. Displays a right chevron and opens the parent DropdownMenuSub on mouseenter.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the trigger <div>. | |
| ChildContent | RenderFragment? | Trigger label. |
DropdownMenuSubContent
Submenu surface. Renders relative to its trigger with collision avoidance; closes on mouseleave.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | DropdownMenuSide | Preferred opening side relative to the subtrigger. Default: Right. Flips to Left when the right side overflows. Other values: Top, Bottom, Left. | |
| Align | DropdownMenuAlign | Alignment along the trigger's cross-axis. Default: Start. Other values: Center, End. | |
| SideOffset | double | Gap in pixels between subtrigger and submenu surface. Default: 0. | |
| ClassName | string? | Extra CSS classes appended to the submenu surface. | |
| ChildContent | RenderFragment? | Submenu items. |