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, RzAvatar, etc.), multiple menu sections, dynamic alignment via the In this example the dropdown is activated by clicking an RzAvatar. The menu options include Dashboard, Settings, and Sign Out. 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. You can control the dropdown’s alignment using 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.<RzDropdown Anchor="AnchorPoint.Bottom">
<Trigger>
<RzAvatar ImageSource="/images/profile/51.jpg" Initials="JD" Shape="AvatarShape.Circle" Size="Size.Medium" />
</Trigger>
<Content>
<RzDropdownSection>
<RzDropdownMenuItem Icon="MdiIcon.Home" Title="Dashboard" />
<RzDropdownMenuItem Icon="MdiIcon.Cog" Title="Settings" />
<RzDropdownMenuItem Icon="MdiIcon.Logout" Title="Sign Out" />
</RzDropdownSection>
</Content>
</RzDropdown><RzDropdown Anchor="AnchorPoint.Bottom">
<Trigger>
<RzButton Variant="ButtonVariant.Primary" Label="Menu" />
</Trigger>
<Content>
<RzDropdownSection>
<RzDropdownMenuItem Icon="MdiIcon.Home" Title="Dashboard" />
<RzDropdownMenuItem Icon="MdiIcon.Chat" Title="Messages" Count="6" />
<RzDropdownMenuItem Icon="MdiIcon.Heart" Title="Favorites" />
</RzDropdownSection>
<RzDropdownSection>
<RzDropdownMenuItem Icon="MdiIcon.Circle" Title="Profile" />
<RzDropdownMenuItem Icon="MdiIcon.Cog" Title="Settings" />
</RzDropdownSection>
<RzDropdownSection>
<RzDropdownMenuItem Icon="MdiIcon.Logout" Title="Sign Out" />
</RzDropdownSection>
</Content>
</RzDropdown>Anchor property. For instance, setting Anchor="AnchorPoint.TopEnd" positions the dropdown menu above the trigger and aligned to its end.<RzDropdown Anchor="AnchorPoint.TopEnd">
<Trigger>
<RzButton Variant="ButtonVariant.Secondary" Label="Options" />
</Trigger>
<Content>
<RzDropdownSection>
<RzDropdownMenuItem Icon="MdiIcon.Settings" Title="Preferences" />
<RzDropdownMenuItem Icon="MdiIcon.Info" Title="About" />
</RzDropdownSection>
</Content>
</RzDropdown>Property Description Trigger RenderFragment – The content that serves as the interactive trigger for the dropdown (for example, an RzAvatar, 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 (12) include: TopStart, Top, TopEnd, LeftStart, Left, LeftEnd, RightStart, Right, RightEnd, BottomEnd, BottomStart, and Bottom. The default value is Bottom.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. Property Description ChildContent RenderFragment – The content rendered within the dropdown section.