Dropdowns

Dropdown Default Buttons


<div class="dropdown">
    <button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu bg-white">
        <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 text-white py-2 px-3 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu bg-white">
        <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>

Single buttons


<div class="dropdown d-inline-block">
    <button class="btn btn-primary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Primary
    </button>
    <ul class="dropdown-menu bg-primary">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-secondary text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Secondary
    </button>
    <ul class="dropdown-menu bg-secondary">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-success text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Success
    </button>
    <ul class="dropdown-menu bg-success">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-info text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Info
    </button>
    <ul class="dropdown-menu bg-info">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-warning text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Warning
    </button>
    <ul class="dropdown-menu bg-warning">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-danger text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Danger
    </button>
    <ul class="dropdown-menu bg-danger">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-dark text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dark
    </button>
    <ul class="dropdown-menu bg-dark">
        <li><a class="dropdown-item text-white" href="#">Action</a></li>
        <li><a class="dropdown-item text-white" href="#">Another action</a></li>
        <li><a class="dropdown-item text-white" href="#">Something else here</a></li>
    </ul>
</div>

<div class="dropdown d-inline-block">
    <button class="btn btn-light text-white py-2 px-3 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Light
    </button>
    <ul class="dropdown-menu bg-light">
        <li><a class="dropdown-item text-dark" href="#">Action</a></li>
        <li><a class="dropdown-item text-dark" href="#">Another action</a></li>
        <li><a class="dropdown-item text-dark" href="#">Something else here</a></li>
    </ul>
</div>

Split Button Dropdown


<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-primary text-white py-2 px-3">Primary</button>
        <button type="button" class="btn btn-primary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Primary</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-secondary text-white py-2 px-3">Secondary</button>
        <button type="button" class="btn btn-secondary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Primary</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-success text-white py-2 px-3">Success</button>
        <button type="button" class="btn btn-success text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Success</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-info text-white py-2 px-3">Info</button>
        <button type="button" class="btn btn-info text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Info</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-warning text-white py-2 px-3">Warning</button>
        <button type="button" class="btn btn-warning text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Warning</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-danger text-white py-2 px-3">Danger</button>
        <button type="button" class="btn btn-danger text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Danger</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-dark text-white py-2 px-3">Dark</button>
        <button type="button" class="btn btn-dark text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Dark</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>
<div class="d-inline-block">
    <div class="btn-group">
        <button type="button" class="btn btn-light text-white py-2 px-3">Light</button>
        <button type="button" class="btn btn-light text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Light</span>
        </button>
        <ul class="dropdown-menu bg-white">
            <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>
</div>

Buttons With Icon


<div class="dropdown">
    <button class="btn btn-primary text-primary bg-transparent p-0 border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu bg-white">
        <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 text-primary bg-transparent p-0 border-0 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu bg-white">
        <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>

Rounded Buttons


<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
    <li><a class="dropdown-item fs-14 mb-2" href="#">Today</a></li>
    <li><a class="dropdown-item fs-14 mb-2" href="#">Last 7 Days</a></li>
    <li><a class="dropdown-item fs-14 mb-2" href="#">Last Month</a></li>
    <li><a class="dropdown-item fs-14 mb-2" href="#">Last 12 Months</a></li>
    <li><a class="dropdown-item fs-14 mb-0" href="#">All Time</a></li>
</ul>

<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
    <li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-stackshare-line"></i> Share</a></li>
    <li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-edit-line"></i> Last 7 Days</a></li>
    <li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-delete-bin-7-line"></i> Last Month</a></li>
</ul>

<ul class="dropdown-menus bg-white mb-0 list-unstyled p-3 rounded-2" style="box-shadow: 0px 10px 35px 0px rgba(50, 110, 189, 0.20);">
    <li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-user-line"></i> Profile</a></li>
    <li><a class="dropdown-item fs-14 mb-2" href="#"><i class="ri-settings-3-line"></i> Settings</a></li>
    <li><a class="dropdown-item fs-14 mb-0" href="#"><i class="ri-logout-circle-line"></i> Logout</a></li>
</ul>