v 0.5.1
v1.0.0 (latest)v0.5.3v0.5.2v0.5.1v0.4v0.3v0.2v0.1
Download

Dropdowns

Single button

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> or <a> elements:

Dropdown link 
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown">
    <a class="btn btn-primary dropdown-toggle" href="#" data-bs-toggle="dropdown">
        Dropdown button
    </a>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Styling

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-light dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-dark dropdown-toggle" data-toggle="dropdown">...</button>
<button class="btn btn-beets dropdown-toggle" data-toggle="dropdown">...</button>

Split button

<div class="btn-group">
    <button class="btn btn-primary">Action</button>
    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

<-- Single button -->
<div class="btn-group">
    <button class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
        Large button
    </button>
    <ul class="dropdown-menu">
        ...
    </ul>
</div>

<-- Split button -->
<div class="btn-group">
    <button class="btn btn-primary btn-lg">Action</button>
    <button class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
        ...
    </ul>
</div>

Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.

<div class="btn-group">
    <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
        Dropdown button
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Remove the caret

For some menus it's better to remove the caret and just use an icon, e.g. settings. Use .dropdown-no-caret to remove the caret. You can use the .btn-aspect to make perfect a circle or square button.

<div class="dropdown">		
    <button class="btn btn-primary dropdown-no-caret dropdown-toggle" data-bs-toggle="dropdown">
        Dropdown button
    </button>
    <div class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </div>
</div>

<div class="dropdown">	
    <button class="btn btn-beets btn-aspect dropdown-no-caret dropdown-toggle" data-bs-toggle="dropdown">
        <i class="fas fa-bars"></i>
    </button>
    <div class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </div>
</div>

<div class="dropdown">	
    <button class="btn btn-ghost-secondary btn-aspect dropdown-no-caret rounded-circle dropdown-toggle" data-bs-toggle="dropdown">
        <i class="fas fa-lg fa-cog"></i>
    </button>
    <div class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </div>		
</div>

Custom caret

This is a nifty little trick! First you remove the caret with .dropdown-no-caret, then add you own icon or svg inside the button, and add a margin, i.e. .ms-1 (extra margin is not needed for split buttons).

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle dropdown-no-caret" data-bs-toggle="dropdown">
        Custom caret!
        <i class="fas fa-xs fa-chevron-down ms-1"></i>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

<div class="btn-group">
    <button class="btn btn-primary">Action</button>
    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split dropdown-no-caret" data-bs-toggle="dropdown">
        <i class="fas fa-xs fa-chevron-down"></i>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Directions

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

<div class="btn-group dropup">
    ...
</div>

Dropright

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

<div class="btn-group dropend">
    ...
</div>

Dropleft

Alignment broken in Bootstrat v5.0?

Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element.

<div class="btn-group dropstart">
    ...
</div>

<div class="btn-group">
    <div class="btn-group dropstart">
        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>
    <button class="btn btn-primary">Split dropstart</button>
</div>

Menu items

Historically dropdown menu contents had to be links, but that’s no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

<div class="btn-group">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
        <ul class="dropdown-menu">
            <li><button class="dropdown-item" href="#">Action</button></li>
            <li><button class="dropdown-item" href="#">Another action</button></li>
            <li><button class="dropdown-item" href="#">Something else here</button></li>
        </ul>
    </div>
    <button class="btn btn-primary">Split dropstart</button>
</div>

Text items

You can create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities.

<ul class="dropdown-menu">
    <li><span class="dropdown-item-text">Dropdown item text</span></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Active

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Regular link</a></li>
    <li><a class="dropdown-item active" href="#">Active link</a></li>
    <li><a class="dropdown-item" href="#">Regular link</a></li>
</ul>

Disabled

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Regular link</a></li>
    <li><a class="dropdown-item disabled" href="#">Disabled link</a></li>
    <li><a class="dropdown-item" href="#">Regular link</a></li>
</ul>

Menu alignment

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Right-aligned menu
    </button>
    <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.

To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-bs-display="static">
        Left-aligned but right aligned when large screen
    </button>
    <div class="dropdown-menu dropdown-menu-lg-end">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-stat.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-bs-display="static">
        Right-aligned but left aligned when large screen
    </button>
    <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Menu content

Headers

Add a header to label sections of actions in any dropdown menu.

<ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Dropdown header</h6></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dividers

Separate groups of related menu items with a divider.

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <div class="dropdown-divider"></div>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

    Some example text that's free-flowing within the dropdown menu.

    And this is more example text.

<ul class="dropdown-menu p-4 text-muted">
    <p>Some example text that's free-flowing within the dropdown menu.</p>
    <p class="mb-0">And this is more example text.</p>
</ul>

Forms

New around here? Sign up Forgot password? 
<div class="dropdown-menu">
    <form class="px-4 py-3">
        <div class="mb-3">
            <label class="form-label" for="exampleDropdownFormEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
        </div>
        <div class="mb-3">
            <label class="form-label" for="exampleDropdownFormPassword1">Password</label>
            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdownCheck">
                <label class="form-check-label" for="dropdownCheck">Remember me</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
</div>