Dropdowns

Single Button Dropdown

Show Code

Use btn class at to create a dropdown toggle with <button> element.

<!-- Single Button Dropdown -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button 
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

<div class="dropdown">
    <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link 
    </a>
    <div class="dropdown-menu">
        <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>

Dropdown Color Variant

Show Code

Use btn- class with below mentioned variation to color dropdown toggle.

<!-- Dropdown Variant -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

Split Button Dropdown

Show Code

Use dropdown-toggle-split to create split button dropdowns as a single button dropdown.

<!-- Split Button Dropdown -->
<div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->


<div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- /btn-group -->

Dropdown Sizing

Show Code

Use btn-lg class to create a large size dropdown button and btn-sm to create a small size dropdown button.

<!-- Dropdown Sizing -->
<div class="btn-group">
    <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button
    </button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-light btn-lg" type="button">
        Large split button
    </button>
    <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    </button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
    </button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button class="btn btn-light btn-sm" type="button">
        Small split button
    </button>
    <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    </button>
    <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Dark Dropdowns

Show Code

Use dropdown-menu-dark class onto an existing dropdown-menu to create dropdown items dark.

<!-- Dark Dropdowns -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" 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>

Alignment options

Show Code

Dropdown demo with various dropdown alignment options.

<!-- Alignment options -->
<div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Right-aligned menu
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static"
        aria-expanded="false">
        Left-aligned, right-aligned lg
    </button>
    <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static"
        aria-expanded="false">
        Right-aligned, left-aligned lg
    </button>
    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group dropstart">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
    </ul>
</div>

Dropdown Options

Show Code

Use data-bs-offset or data-bs-reference to change the position of the dropdown.

<!-- Dropdown Options -->
<div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset"
        data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
        Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
        <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 type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference"
        data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
        <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>

Auto Close Behavior

Show Code

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

<!-- Default dropdown -->
<div class="btn-group">
    <button class="btn btn-light dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
        Default dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
    </ul>
</div>

<!-- Clickable outside dropdown -->
<div class="btn-group">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
        Clickable outside
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
    </ul>
</div>

<!-- Clickable inside dropdown -->
<div class="btn-group">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
        Clickable inside
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
    </ul>
</div>

<!-- Clickable inside dropdown -->
    <div class="btn-group">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
        Manual close
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
        <li><a class="dropdown-item" href="javascript:void(0);">Menu item</a></li>
    </ul>
</div>

Dropdown Menu Item Color

Show Code

Example of dropdown menu and dropdown item color.

Dropdown Menu Success link example

Dropdown Menu link Color example

Dropdown menu Primary link

Dropdown menu Secondary link

Dropdown menu Success link

Dropdown menu Warning link

Dropdown menu Info link

Dropdown menu Danger link

<!-- Dropdown Menu Item Color -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
    <div class="dropdown-menu dropdownmenu-primary">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
    <div class="dropdown-menu dropdownmenu-secondary">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
    <div class="dropdown-menu dropdownmenu-success">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
    <div class="dropdown-menu dropdownmenu-warning">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
    <div class="dropdown-menu dropdownmenu-info">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
    <div class="dropdown-menu dropdownmenu-danger">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div><!-- btn-group -->

Menu Content

Show Code

Example of dropdown menu containing Headers, Text and Forms content.

<!-- Menu Content -->
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Header 
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-header noti-title">
            <h5 class="font-size-13 text-muted text-truncate mn-0">Welcome Jessie!</h5>
        </div>
        <!-- item-->
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<!-- text Content -->
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Text 
    </button>
    <div class="dropdown-menu dropdown-menu-md p-3">
        <p>
            Some example text that's free-flowing within the dropdown menu.
        </p>
        <p class="mb-0">
            And this is more example text.
        </p>
    </div>
</div>

<!-- Forms Content -->
<div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Forms 
    </button>
    <div class="dropdown-menu dropdown-menu-md p-4">
        <form>
            <div class="mb-2">
                <label class="form-label" for="exampleDropdownFormEmail">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com">
            </div>
            <div class="mb-2">
                <label class="form-label" for="exampleDropdownFormPassword">Password</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password">
            </div>
            <div class="mb-2">
                <div class="form-check custom-checkbox">
                    <input type="checkbox" class="form-check-input" id="rememberdropdownCheck">
                    <label class="form-check-label" for="rememberdropdownCheck">Remember me</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
</div>

Notifications

Show Code

Dropdown with notification containing multiple tabs.

<!-- Notifications -->
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0 d-inline-block position-relative" aria-labelledby="page-header-notifications-dropdown" style="z-index: 1;">
    <div class="dropdown-head bg-primary bg-pattern rounded-top">
        <div class="p-3">
            <div class="row align-items-center">
                <div class="col">
                    <h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
                </div>
                <div class="col-auto dropdown-tabs">
                    <span class="badge badge-soft-light fs-13" data-key="t-view-all"> 4 New</span>
                </div>
            </div>
        </div>

        <div class="px-2 pt-2">
            <ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true" id="notificationItemsTab" role="tablist">
                <li class="nav-item waves-effect waves-light">
                    <a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab1" role="tab" aria-selected="true">
                        All (4)
                    </a>
                </li>
                <li class="nav-item waves-effect waves-light">
                    <a class="nav-link" data-bs-toggle="tab" href="#messages-tab1" role="tab" aria-selected="false">
                        Messages
                    </a>
                </li>
                <li class="nav-item waves-effect waves-light">
                    <a class="nav-link" data-bs-toggle="tab" href="#alerts-tab1" role="tab" aria-selected="false">
                        Alerts
                    </a>
                </li>
            </ul>
        </div>                                    
    </div>

    <div class="tab-content" id="notificationItemsTabContent">
        <div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab1" role="tabpanel" aria-labelledby="updates-tab">
            <div data-simplebar style="max-height: 300px;" class="pe-2">
                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <div class="avatar-xs me-3">
                            <span class="avatar-title bg-soft-info text-info rounded-circle fs-16">
                                <i class="bx bx-badge-check"></i>
                            </span>
                        </div>
                        <div class="flex-1">
                            <h6 class="mt-0 mb-2 lh-base">Your <b>Elite</b> author Graphic Optimization <span class="text-secondary">reward</span> is ready!</h6>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> Just 30 sec ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-2.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 48 min ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <div class="avatar-xs me-3">
                            <span class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
                                <i class='bx bx-message-square-dots' ></i>
                            </span>
                        </div>
                        <div class="flex-1">
                            <h6 class="mt-0 mb-2 fs-13 lh-base">You have received <b class="text-success">20</b> new messages in the conversation</h6>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-8.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">We talked about a project on linkedin.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <div class="my-3 text-center">
                    <button type="button" class="btn btn-soft-success waves-effect waves-light">View All Notifications <i class="ri-arrow-right-line align-middle"></i></button>
                </div>
            </div>

        </div>

        <div class="tab-pane fade py-2 ps-2" id="messages-tab1" role="tabpanel" aria-labelledby="messages-tab">
            <div data-simplebar style="max-height: 300px;" class="pe-2">
                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-3.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">James Lemire</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">We talked about a project on linkedin.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 30 min ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-2.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-6.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">Kenneth Brown</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">Mentionned you in his comment on 📃 invoice #12501.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 10 hrs ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <a href="#!" class="text-reset notification-item d-block dropdown-item">
                    <div class="d-flex">
                        <img src="assets/images/users/avatar-8.jpg"
                            class="me-3 rounded-circle avatar-xs" alt="user-pic">
                        <div class="flex-1">
                            <h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
                            <div class="fs-13 text-muted">
                                <p class="mb-1">We talked about a project on linkedin.</p>
                            </div>
                            <p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                <span><i class="mdi mdi-clock-outline"></i> 3 days ago</span>
                            </p>
                        </div>
                        <div class="px-2 fs-16">
                            <input class="form-check-input" type="checkbox">
                        </div>
                    </div>
                </a>

                <div class="my-3 text-center">
                    <button type="button" class="btn btn-soft-success waves-effect waves-light">View All Messages <i class="ri-arrow-right-line align-middle"></i></button>
                </div>
            </div>
        </div>
        <div class="tab-pane fade p-4" id="alerts-tab1" role="tabpanel" aria-labelledby="alerts-tab">
            <div class="w-25 pt-3 mx-auto">
                <img src="assets/images/svg/bell.svg" class="img-fluid" alt="user-pic">
            </div>
            <div class="text-center pb-5 mt-2">
                <h6 class="fs-18 fw-semibold lh-base">Hey! You have no any notifications </h6>
            </div>
        </div>
    </div>
</div>

Dropdowns

Single Button Dropdown

Dropdown Color Variant

Split Button Dropdown

Dropdown Sizing

Dark Dropdowns

Alignment options

Dropdown Options

Auto Close Behavior

Dropdown Menu Item Color

Dropdown Menu Success link example

Dropdown Menu link Color example

Menu Content

Notifications

Theme Customizer

Layout

Vertical

Horizontal

Two Column

Color Scheme

Light

Dark

Layout Width

Fluid

Boxed

Layout Position

Topbar Color

Light

Dark

Sidebar Size

Default

Compact

Small (Icon View)

Small Hover View

Sidebar View

Default

Detached

Sidebar Color

Light

Dark

Angela Bernier

David Grasso

Mike Bunch

Web Apps

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$ 1250

Stillbird Helmet

$990

$1258.58

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Dropdowns

Single Button Dropdown

Dropdown Color Variant

Split Button Dropdown

Dropdown Sizing

Dark Dropdowns

Alignment options

Dropdown Options

Auto Close Behavior

Dropdown Menu Item Color

Dropdown Menu Success link example

Dropdown Menu link Color example

Menu Content

Welcome Jessie!

Notifications

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Hey! You have no any notifications

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Hey! You have no any notifications

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Hey! You have no any notifications

Theme Customizer

Layout

Vertical

Horizontal

Two Column

Color Scheme

Light

Dark

Layout Width