# Dropdown

> AstrolDropdown: Blazor actions menu with icons, shortcuts, disabled or dangerous options, links, separators and keyboard support; grids and modals don't clip it.

Source page: https://doc.astrolui.com/basic-component/dropdown

Button that opens a menu of actions.

## 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.

```razor
@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.