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. Full keyboard accessibility is supported. 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

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.