1. Demo AstrolDropdown

With Text it is a secondary button with an arrow; without text it is a quiet icon button («⋮»), ideal at the end of a row or a card. The menu is painted in the browser's top layer, so grids, modals and scrolling containers don't clip it. Keyboard: Enter, Space or Arrow down open it, the arrows move through the options and Esc closes it.

@using Astrol.Component.Basic.Dropdown

<AstrolDropdown Text="Actions" Icon="astrol-cog" Align="AstrolDropdownAlign.Start">

 <AstrolDropdownItem Text="Edit" Icon="astrol-pencil" Shortcut="Ctrl+E" OnClick="Edit" />

 <AstrolDropdownItem Text="Duplicate" Icon="astrol-clone" OnClick="Duplicate" />

 <AstrolDropdownItem Text="Archive" Icon="astrol-archive" Disabled="true" />

 <AstrolDropdownSeparator />

 <AstrolDropdownItem Text="Delete" Icon="astrol-trash" Danger="true" OnClick="Delete" />

</AstrolDropdown>

@* Without Text: icon-only button (⋮), e.g. at the end of a row. AriaLabel names it. *@

<AstrolDropdown AriaLabel="Row actions">

 <AstrolDropdownItem Text="View" Icon="astrol-eye" OnClick="View" />

 <AstrolDropdownItem Text="Send email" Icon="astrol-mail" Href="mailto:juan@example.com" />

 <AstrolDropdownSeparator Title="Danger zone" />

 <AstrolDropdownItem Text="Delete" Icon="astrol-trash" Danger="true" OnClick="Delete" />

</AstrolDropdown>

Supported parameters

AstrolDropdown

• Text (string), button text; without text the button is just an icon.
• Icon (string), button icon (without text, default astrol-ellipsis-vert).
• AriaLabel (string), accessible text of the button and the menu (required for icon-only; default "More actions").
• Align (AstrolDropdownAlign), End (default) aligns the menu with the button's right edge; Start, with the left one.
• ShowChevron (bool), arrow next to the text (default true).
• Disabled (bool), Class and ButtonClass (string).
• OnToggle (EventCallback<bool>), when it opens (true) and closes (false); IsOpen, OpenAsync() and CloseAsync() from code.

AstrolDropdownItem

• Text (string) or ChildContent, Icon (string) and Shortcut (string), e.g. "Ctrl+E".
• OnClick (EventCallback), or Href (string) and Target to make it a link.
• Disabled (bool), Danger (bool) (in red) and KeepOpen (bool) (doesn't close the menu).

AstrolDropdownSeparator: line between groups; with Title, also a group title.