Dropdowns

render modes

server
webassembly

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision. Clicking outside of the dropdown will close it.

Button dropdown

Selected: Select a menu item

Static Usage

<PureDropdown Items="Items" OnItemSelected="ItemSelected">
    <ChildContent>Settings</ChildContent>
    <MenuItems>
        <PureDropdownItem OnItemSelected="() => ItemSelected(1)">One</PureDropdownItem>
        <PureDropdownItem OnItemSelected="() => ItemSelected(2)">Two</PureDropdownItem>
    </MenuItems>
</PureDropdown>

Dynamic Usage

<PureDropdown Items="Items" OnItemSelected="ItemSelected">
    <ChildContent>Settings</ChildContent>
    <MenuItems>
        @foreach (var item in Items)
        {
            <PureDropdownItem OnItemSelected="() => ItemSelected(item)">@item.Text</PureDropdownItem>
        }
    </MenuItems>
</PureDropdown>