Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Single button

Blazor

<BsDropdown>
    <BsButton Toggle="BsButtonToggle.Dropdown" Variant="BsButtonVariant.Secondary" >
        Dropdown button
    </BsButton>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
        <BsDropdownDivider />
        <BsButtonDropdownItem OnClick="args => Console.WriteLine(args.Type)">Here is button item</BsButtonDropdownItem>
    </BsDropdownMenu>
</BsDropdown>

The best part is you can do this with any button variant, too:

Blazor

<div class="@Bs.Css.DisplayFlex.FlexRow.Gap2.FlexWrap">

    @foreach (var variant in _variants)
    {
        <BsButtonGroup>
            <BsButton Toggle="BsButtonToggle.Dropdown" Variant="variant">
                Dropdown button
            </BsButton>
            <BsDropdownMenu>
                <BsAnchorDropdownItem>Action</BsAnchorDropdownItem>
                <BsAnchorDropdownItem>Another action</BsAnchorDropdownItem>
                <BsAnchorDropdownItem>Something else here</BsAnchorDropdownItem>
            </BsDropdownMenu>
        </BsButtonGroup>
    }

</div>

@code
{
    private readonly BsButtonVariant[] _variants = Enum.GetValues<BsButtonVariant>();
}

Split button

Blazor

<BsButtonGroup>
    <BsButton Variant="BsButtonVariant.Primary">Dropdown button</BsButton>
    <BsDropdownToggleSplitButton Variant="BsButtonVariant.Primary"/>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsButtonGroup>

Sizing

Button

Split Button

Blazor

<BsDropdown>
    <BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Dropdown" Size="BsButtonSize.Small">
        Small button
    </BsButton>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsDropdown>

<BsDropdown>
    <BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Dropdown" Size="BsButtonSize.Large">
        Large button
    </BsButton>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsDropdown>

<BsButtonGroup>
    <BsButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Small">
        Small split button
    </BsButton>
    <BsDropdownToggleSplitButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Small"/>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsButtonGroup>

<BsButtonGroup>
    <BsButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Large">
        Large split button
    </BsButton>
    <BsDropdownToggleSplitButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Large"/>
    <BsDropdownMenu>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsButtonGroup>

Dark dropdowns

Blazor

<BsDropdown>
    <BsButton Toggle="BsButtonToggle.Dropdown" Variant="BsButtonVariant.Secondary" >
        Dropdown button
    </BsButton>
    <BsDropdownMenu Dark>
        <BsAnchorDropdownItem Href="#">Here is anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Another anchor item</BsAnchorDropdownItem>
        <BsAnchorDropdownItem Href="#">Something else here</BsAnchorDropdownItem>
        <BsDropdownDivider />
        <BsAnchorDropdownItem Href="#">Separated link</BsAnchorDropdownItem>
    </BsDropdownMenu>
</BsDropdown>