Dropdowns

Mirrors the basic examples from Bootstrap’s dropdowns documentation.

Basic

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    Dropdown button
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Something else here</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Split button

aspnet 

<bs-dropdown stack="this.Html.GetStack()" is-split="true" btn-style="Primary">
    Primary
    <bs-split-button>
        <span class="visually-hidden">Toggle Dropdown</span>
    </bs-split-button>
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Something else here</bs-dropdown-menu-item>
        <bs-dropdown-menu-divider />
        <bs-dropdown-menu-item href="#">Separated link</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Sizing

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" btn-size="Large">
    Large button
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" btn-size="Small">
    Small button
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Directions

aspnet 

<bs-dropdown stack="this.Html.GetStack()" drop-direction="Up" btn-style="Secondary">
    Dropup
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<bs-dropdown stack="this.Html.GetStack()" drop-direction="End" btn-style="Secondary">
    Dropend
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<bs-dropdown stack="this.Html.GetStack()" drop-direction="Start" btn-style="Secondary">
    Dropstart
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Menu alignment

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    End aligned
    <bs-dropdown-menu stack="this.Html.GetStack()" class="dropdown-menu-end">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Responsive alignment

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" drop-alignment="End" drop-alignment-lg="Start">
    Right-aligned but left aligned when large screen
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Dark dropdown

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    Dark menu
    <bs-dropdown-menu stack="this.Html.GetStack()" class="dropdown-menu-dark">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Forms in dropdown

Email
Password
Remember me
aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    Form menu
    <bs-form x-padding="Default4" y-padding="Default3">
        <bs-floating-label bottom-margin="Default3">
            <bs-label>Email</bs-label>
            <bs-input />
        </bs-floating-label>
        <bs-floating-label bottom-margin="Default3">
            <bs-label>Password</bs-label>
            <bs-input input-type="Password"/>
        </bs-floating-label>
        <bs-check name="dummyName" bottom-margin="Default3">
            Remember me
        </bs-check>
        <bs-button btn-type="Submit" btn-style="Primary">Sign in</bs-button>
    </bs-form>
</bs-dropdown>

Auto-close behavior

aspnet 

<!-- Close only on item clicks inside the menu -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" data-bs-auto-close="inside">
    Inside only
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<!-- Close on outside clicks only -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" data-bs-auto-close="outside">
    Outside only
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<!-- Do not auto-close (close programmatically) -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" data-bs-auto-close="false">
    Manual
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<!-- BCL: forms used as menus automatically set data-bs-auto-close="outside" -->
Note: when using a form as the menu container, BCL sets data-bs-auto-close="outside" on the toggle automatically so clicks inside the form don’t close the menu.

Offsets and reference

aspnet 

<!-- Offset the menu via Popper (skid, distance) -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" data-bs-offset="10,20">
    Offset 10,20
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

<!-- Change Popper reference element (split dropdown) -->
<bs-dropdown stack="this.Html.GetStack()" is-split="true" btn-style="Secondary" data-bs-reference="parent">
    Split (reference: parent)
    <bs-split-button>
        <span class="visually-hidden">Toggle Dropdown</span>
    </bs-split-button>
    <bs-dropdown-menu stack="this.Html.GetStack()" class="dropdown-menu-end">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Static display

aspnet 

<!-- Keep menu positioned without dynamic repositioning -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary" data-bs-display="static">
    Display: static
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>

Submenus (BCL extension)

aspnet 

<!-- Nest a menu inside a menu item -->
<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    With submenu
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Top action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item>
            More options
            <bs-dropdown-menu stack="this.Html.GetStack()">
                <bs-dropdown-menu-item href="#">Sub item 1</bs-dropdown-menu-item>
                <bs-dropdown-menu-item href="#">Sub item 2</bs-dropdown-menu-item>
            </bs-dropdown-menu>
        </bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>
Submenus aren’t part of upstream Bootstrap 5.3; this is a BCL convenience with accessible markup and proper toggle behavior built-in.

Events

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary"
             on-show="console.log('Dropdown show')"
             on-shown="console.log('Dropdown shown')"
             on-hide="console.log('Dropdown hide')"
             on-hidden="console.log('Dropdown hidden')">
    With events
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>
These map to show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, and hidden.bs.dropdown.

Headers, dividers, active and disabled

aspnet 

<bs-dropdown stack="this.Html.GetStack()" btn-style="Secondary">
    Menu items
    <bs-dropdown-menu stack="this.Html.GetStack()">
        <bs-dropdown-menu-header>Header</bs-dropdown-menu-header>
        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
        <bs-dropdown-menu-item href="#" class="active">Active item</bs-dropdown-menu-item>
        <bs-dropdown-menu-divider />
        <bs-dropdown-menu-item href="#" disabled="true">Disabled</bs-dropdown-menu-item>
    </bs-dropdown-menu>
</bs-dropdown>