Dropdown Menu

Dropdown menus provide a user-friendly and space-efficient way to display a list of options or actions. When the trigger element is activated (via click or keyboard events), the dropdown menu appears with a smooth transition. The component supports any renderable trigger (such as a Button, RzAvatar, etc.), multiple menu groups, labels, separators, and nested sub-menus. Dynamic alignment is handled via the Anchor property on RzDropdownMenu and DropdownMenuSub. This component follows the menu widget accessibility pattern (command/action menu), not a disclosure-navigation list. The trigger exposes aria-haspopup="menu", aria-expanded, and aria-controls; the content uses role="menu"; and items use menuitem semantics with roving focus keyboard navigation (Arrow keys, Home, End) while skipping disabled items. Dismissal behavior (Escape and outside pointer interaction) is coordinated through the shared dismissableLayer primitive so only the top-most open layer closes. All interactivity is handled via Alpine.js (using the rzDropdownMenu and rzDropdownSubmenu data objects), ensuring a CSP-compliant, accessible experience.

Dropdown with RzAvatar Trigger

In this example, the dropdown is activated by clicking an RzAvatar. The menu options include Dashboard, Settings, and Sign Out.

Source

<RzDropdownMenu Anchor="AnchorPoint.Bottom">
    <DropdownMenuTrigger>
        <RzAvatar Size="Size.Medium">
            <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Medium" />
        </RzAvatar>
    </DropdownMenuTrigger>
    <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem Icon="MdiIcon.Home">Dashboard</DropdownMenuItem>
            <DropdownMenuItem Icon="MdiIcon.Cog">Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Icon="MdiIcon.Logout">Sign Out</DropdownMenuItem>
    </DropdownMenuContent>
</RzDropdownMenu>

Button Dropdown with Groups & Sub-menu

This example showcases a dropdown activated by a Button. The menu is organized into multiple groups using DropdownMenuGroup and separated by DropdownMenuSeparator. It also includes a sub-menu for "Invite users" using DropdownMenuSub, DropdownMenuSubTrigger, and DropdownMenuSubContent. Shortcuts are displayed using the DropdownMenuShortcut component.

Source

<RzDropdownMenu Anchor="AnchorPoint.Bottom">
    <DropdownMenuTrigger AsChild>
        <RzButton Variant="ThemeVariant.Primary">Open Menu</RzButton>
    </DropdownMenuTrigger>
    <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem Icon="MdiIcon.AccountCircleOutline">
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem Icon="MdiIcon.CreditCardOutline">
                Billing
                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem Icon="MdiIcon.CogOutline">
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
            <DropdownMenuItem Icon="MdiIcon.AccountGroupOutline">Team</DropdownMenuItem>
            <DropdownMenuSub>
                <DropdownMenuSubTrigger Icon="MdiIcon.AccountPlusOutline">
                    Invite users
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent class="w-48">
                    <DropdownMenuItem Icon="MdiIcon.EmailOutline">Email</DropdownMenuItem>
                    <DropdownMenuItem Icon="MdiIcon.MessageOutline">Message</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>More...</DropdownMenuItem>
                </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem Icon="MdiIcon.PlusBoxOutline">
                New Team
                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
            </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem Icon="MdiIcon.Github">GitHub</DropdownMenuItem>
        <DropdownMenuItem Icon="MdiIcon.Lifebuoy">Support</DropdownMenuItem>
        <DropdownMenuItem Disabled="true" Icon="MdiIcon.CloudOutline">API</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem Icon="MdiIcon.Logout">
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
    </DropdownMenuContent>
</RzDropdownMenu>

RzDropdownMenu Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – Contains the `DropdownMenuTrigger` and `DropdownMenuContent` components.	`RenderFragment`	Required
`Anchor`	`AnchorPoint` – Preferred alignment of the dropdown relative to its trigger. Options include `TopStart`, `Top`, `TopEnd`, `LeftStart`, `Left`, `LeftEnd`, `RightStart`, `Right`, `RightEnd`, `BottomStart`, `Bottom`, `BottomEnd`.	`AnchorPoint`	`AnchorPoint.Bottom`
`Offset`	`int` – Offset in pixels from the anchor point.	`int`	`4`
`IsModal`	`bool` – Determines if the dropdown behaves modally (traps focus).	`bool`	`false`

DropdownMenuTrigger Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The content that serves as the interactive trigger for the dropdown (e.g., an RzAvatar, RzButton).	`RenderFragment`	Required

DropdownMenuContent Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The menu content rendered inside the dropdown panel. Typically includes `DropdownMenuItem`, `DropdownMenuGroup`, etc.	`RenderFragment`	Required

DropdownMenuLabel Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The text or content of the label.	`RenderFragment`	Required

DropdownMenuGroup Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The content of the group, typically `DropdownMenuItem`s.	`RenderFragment`	Required

DropdownMenuItem Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The primary text content of the menu item.	`RenderFragment`	Required
`Icon`	`SvgIcon?` – An optional icon (from Blazicons) to display before the item content.	`SvgIcon?`	`null`
`ShortcutContent`	`RenderFragment?` – Optional content to display as a shortcut hint (e.g., using `DropdownMenuShortcut`).	`RenderFragment?`	`null`
`Disabled`	`bool` – If true, the menu item will be disabled and non-interactive.	`bool`	`false`

DropdownMenuSeparator Component Parameters

This component accepts no specific parameters other than standard HTML attributes via AdditionalAttributes.

DropdownMenuShortcut Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The text or content of the shortcut hint (e.g., "⌘S").	`RenderFragment`	Required

DropdownMenuSub Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – Contains the `DropdownMenuSubTrigger` and `DropdownMenuSubContent` components.	`RenderFragment`	Required
`Anchor`	`AnchorPoint` – Preferred alignment of the sub-menu content relative to its trigger.	`AnchorPoint`	`AnchorPoint.RightStart`
`Offset`	`int` – Offset in pixels for the sub-menu content.	`int`	`-4`

DropdownMenuSubTrigger Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The text or content of the sub-menu trigger.	`RenderFragment`	Required
`Icon`	`SvgIcon?` – An optional icon to display before the trigger content.	`SvgIcon?`	`null`

DropdownMenuSubContent Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment` – The content rendered inside the sub-menu panel, typically `DropdownMenuItem`s.	`RenderFragment`	Required

Accessibility

RzDropdownMenu implements a menu-widget pattern for action menus. The trigger reflects open and closed state, the menu content is linked to the trigger, and menu entries are exposed as interactive menu items. Labels and separators are used for grouping and are not part of item focus navigation. Disabled items remain visible but are skipped during keyboard movement.

Keyboard Interaction

Key	Behavior
`Enter`	On the trigger, opens the menu. On a standard menu item, activates the item and closes the menu.
`Space`	On the trigger, opens the menu.
`ArrowDown`	Moves focus to the next enabled menu item.
`ArrowUp`	Moves focus to the previous enabled menu item.
`Home`	Moves focus to the first enabled menu item.
`End`	Moves focus to the last enabled menu item.
`Escape`	Closes the open menu layer. For root close, focus returns to the trigger.
`Tab`	Closes the root menu and returns focus to the trigger.

Pointer and Dismissal

Clicking the trigger opens the dropdown. Clicking the trigger again closes it. Clicking outside an open menu closes it, while clicking inside menu content does not count as an outside interaction. Selecting a regular menu item closes the menu. Submenu triggers open nested content without closing the parent menu.

Focus Management

Keyboard opening paths move focus into menu items and roving focus manages Arrow key movement between enabled entries. Disabled items, separators, labels, and hidden entries are excluded from focus movement. When the root menu closes through Escape, Tab, outside click, or item selection, focus is restored to the trigger.

SSR and Alpine Runtime

Dropdown behavior is SSR-compatible and Alpine-powered. You can use it in SSR pages without Blazor interactive render modes. Runtime interaction is handled by Alpine and shared client-side primitives, not by EventCallback, @onclick, or @bind.

Author Guidance

Use clear trigger text, or provide an accessible label for icon-only triggers.
Keep menu item labels short and action-oriented.
Use labels and separators for grouping only, not as interactive actions.
Do not rely on disabled items as the only way to communicate critical information.
Avoid complex form workflows inside dropdown menus.
Name destructive actions clearly, such as Delete project instead of Delete.

Accessible Structure Example

Source

<RzDropdownMenu>
    <DropdownMenuTrigger AsChild>
        <RzButton aria-label="Open account actions">Account</RzButton>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuLabel>Account</DropdownMenuLabel>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem Disabled="true">API Tokens</DropdownMenuItem>
        <DropdownMenuItem>Sign out</DropdownMenuItem>
    </DropdownMenuContent>
</RzDropdownMenu>

Alpine API

This page uses the rzDropdownMenu Alpine x-data component.

Method	Parameters	Description
`toggle`	`—`	Toggles the menu open/closed.
`updatePosition`	`—`	Recomputes floating position for menu content.