Dropdowns

Single Button Dropdown

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

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

<!-- Dropdown Variant -->
<div class="btn-group material-shadow">
    <button type="button" class="btn btn-primary dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-success dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-light dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-info dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-secondary dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-warning dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-danger dropdown-toggle material-shadow-none" 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 material-shadow">
    <button type="button" class="btn btn-dark dropdown-toggle material-shadow-none" 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

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

<!-- Split Button Dropdown -->
<div class="btn-group material-shadow">
    <button type="button" class="btn btn-primary material-shadow-none">Primary</button>
    <button type="button" class="btn btn-primary material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-success material-shadow-none">Success</button>
    <button type="button" class="btn btn-success material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-light material-shadow-none">Light</button>
    <button type="button" class="btn btn-light material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-info material-shadow-none">Info</button>
    <button type="button" class="btn btn-info material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-secondary material-shadow-none">Secondary</button>
    <button type="button" class="btn btn-secondary material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-warning material-shadow-none">Warning</button>
    <button type="button" class="btn btn-warning material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-danger material-shadow-none">Danger</button>
    <button type="button" class="btn btn-danger material-shadow-none 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 material-shadow">
    <button type="button" class="btn btn-dark material-shadow-none">Dark</button>
    <button type="button" class="btn btn-dark material-shadow-none 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

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 material-shadow">
    <button class="btn btn-primary btn-lg dropdown-toggle material-shadow-none" 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 material-shadow">
    <button class="btn btn-light btn-lg material-shadow-none" 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 material-shadow">
    <button class="btn btn-primary btn-sm dropdown-toggle material-shadow-none" 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 material-shadow">
    <button class="btn btn-light btn-sm material-shadow-none" 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

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

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

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

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

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 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

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

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 bg-light-subtle text-body 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-info-subtle text-info rounded-circle fs-16">
                                <i class="bx bx-badge-check"></i>
                            </span>
                        </div>
                        <div class="flex-grow-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-grow-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-danger-subtle text-danger rounded-circle fs-16">
                                <i class='bx bx-message-square-dots' ></i>
                            </span>
                        </div>
                        <div class="flex-grow-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-grow-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-grow-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-grow-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-grow-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-grow-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>
© Velzon.
Design & Develop by Themesbrand