Dropdown

Dropdowns 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, Avatar, etc.), multiple menu sections, dynamic alignment via the Anchor property, and full keyboard accessibility. All interactivity is handled via Alpine.js (using the rzDropdown data object), ensuring a CSP‑compliant, accessible experience.

Dropdown with Avatar Trigger

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

Source

<Dropdown Anchor="AnchorPoint.BottomCenter">
    <Trigger>
        <Avatar ImageSource="/images/profile/51.jpg" Initials="JD" Shape="AvatarShape.Circle" Size="Size.Medium" />
    </Trigger>
    <Content>
        <DropdownSection>
            <DropdownMenuItem Icon="MdiIcon.Home" Title="Dashboard" />
            <DropdownMenuItem Icon="MdiIcon.Cog" Title="Settings" />
            <DropdownMenuItem Icon="MdiIcon.Logout" Title="Sign Out" />
        </DropdownSection>
    </Content>
</Dropdown>

Dropdown with Button Trigger

In this example the dropdown is activated with a Button trigger. The menu is organized into multiple sections: the first section contains Dashboard, Messages (with a numeric badge), and Favorites; the second section contains Profile and Settings; and a final standalone Sign Out option is provided. The dropdown will automatically adjust its alignment to remain fully visible.

Source

<Dropdown Anchor="AnchorPoint.BottomCenter">
    <Trigger>
        <Button Variant="ButtonVariant.Primary" Label="Menu" />
    </Trigger>
    <Content>
        <DropdownSection>
            <DropdownMenuItem Icon="MdiIcon.Home" Title="Dashboard" />
            <DropdownMenuItem Icon="MdiIcon.Chat" Title="Messages" Count="6" />
            <DropdownMenuItem Icon="MdiIcon.Heart" Title="Favorites" />
        </DropdownSection>
        <DropdownSection>
            <DropdownMenuItem Icon="MdiIcon.Circle" Title="Profile" />
            <DropdownMenuItem Icon="MdiIcon.Cog" Title="Settings" />
        </DropdownSection>
        <DropdownSection>
            <DropdownMenuItem Icon="MdiIcon.Logout" Title="Sign Out" />
        </DropdownSection>
    </Content>
</Dropdown>

Dropdown with Custom Anchor Point

You can control the dropdown’s alignment using the Anchor property. For instance, setting Anchor="AnchorPoint.TopEnd" positions the dropdown menu above the trigger and aligned to its end.

Source

<Dropdown Anchor="AnchorPoint.TopEnd">
    <Trigger>
        <Button Variant="ButtonVariant.Secondary" Label="Options" />
    </Trigger>
    <Content>
        <DropdownSection>
            <DropdownMenuItem Icon="MdiIcon.Settings" Title="Preferences" />
            <DropdownMenuItem Icon="MdiIcon.Info" Title="About" />
        </DropdownSection>
    </Content>
</Dropdown>

Dropdown Component Parameters

Property	Description
Trigger	RenderFragment – The content that serves as the interactive trigger for the dropdown (for example, an Avatar, Button, etc.). (Required)
Content	RenderFragment – The menu content rendered inside the dropdown. Typically, this includes one or more `DropdownSection` components. (Required)
Anchor	AnchorPoint – Determines the preferred alignment of the dropdown relative to its trigger. Options include: `TopStart`, `TopCenter`, `TopEnd`, `Start`, `End`, `BottomEnd`, `BottomStart`, and `BottomCenter`. The default value is `BottomCenter`.

DropdownMenuItem Component Parameters

Property	Description
Icon	SvgIcon – An optional icon (from Blazicons) to display alongside the title.
Title	string – The label text for the menu item. (Required)
Count	int? – An optional numeric badge displayed alongside the title.

DropdownSection Component Parameters

Property	Description
ChildContent	RenderFragment – The content rendered within the dropdown section.