Dropdowns
Dropdowns Button & Link
<!-- Dropdown button -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
</ul>
</div>
<!-- Dropdown link -->
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
</ul>
</div>
Dropdowns Single Buttons
<!-- Example Single Primary Button -->
<div class="btn-group me-2 mb-20">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Single Secondary Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Secondary
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Single Success Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Success
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Single Info Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Info
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Single Warning Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Warning
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Single Danger Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Danger
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dropdowns Split Buttons
<!-- Example Split Primary button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Split Secondary Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Split Success Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-success">Action</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Split Info Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Split Warning Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-warning">Action</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<!-- Example Split Danger Button -->
<div class="btn-group me-2 mb-15">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dropdowns Button Sizing Large
<!-- Large button groups (default and split) -->
<div class="btn-group mb-20 mb-sm-0">
<button class="btn btn-primary-lg dropdown-toggle fs-16" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary-lg fs-16" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dropdowns Button Sizing Large
<!-- Large button groups (default and split) -->
<div class="btn-group mb-20 mb-sm-0">
<button class="btn btn-primary-lg dropdown-toggle fs-16" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary-lg fs-16" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dropdowns Button Sizing Small
<!-- Large button groups (default and split) -->
<div class="btn-group mb-20 mb-sm-0">
<button class="btn btn-primary-sm dropdown-toggle fs-16" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary-sm fs-16" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dark dropdowns
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
<li><hr class="dropdown-divider border-color"></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Separated link</a></li>
</ul>
</div>
Dark Navbar Dropdowns
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Another action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Dropdowns Alignment Options
<div class="btn-group me-2 mb-20">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group me-2 mb-20">
<button type="button" class="btn btn-primary 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 fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group me-2 mb-20">
<button type="button" class="btn btn-primary 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 fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group me-2 mb-20">
<button type="button" class="btn btn-primary 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 fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart me-2 mb-20">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend me-2 mb-20">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup me-2 mb-20">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropdown-center me-2 mb-20">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Action two</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Action three</a></li>
</ul>
</div>
<div class="btn-group dropup-center dropup me-2 mb-20">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered Dropup
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="#">Action</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Action two</a></li>
<li><a class="dropdown-item fs-14 text-body" href="#">Action three</a></li>
</ul>
</div>
Dropdowns Custom
<div class="dropdown action-dropdown">
<button class="btn p-0 border-0 read-more-dot" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="profile.html"><i data-feather="eye"></i> View Profile</a></li>
<li><a class="dropdown-item fs-14 text-body" href="settings.html"><i data-feather="settings"></i> Settings</a></li>
<li><a class="dropdown-item fs-14 text-body" href="faqs.html"><i data-feather="alert-circle"></i> Help & feedback</a></li>
<li><a class="dropdown-item fs-14 text-body" href="logout.html"><i data-feather="log-out"></i> Logout</a></li>
</ul>
</div>
<div class="dropdown action-dropdown dropup-center dropup">
<button class="btn p-0 border-0 read-more-dot bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i data-feather="more-vertical"></i>
</button>
<ul class="dropdown-menu border-color">
<li><a class="dropdown-item fs-14 text-body" href="profile.html"><i data-feather="eye"></i> View Profile</a></li>
<li><a class="dropdown-item fs-14 text-body" href="settings.html"><i data-feather="settings"></i> Settings</a></li>
<li><a class="dropdown-item fs-14 text-body" href="faqs.html"><i data-feather="alert-circle"></i> Help & feedback</a></li>
<li><a class="dropdown-item fs-14 text-body" href="logout.html"><i data-feather="log-out"></i> Logout</a></li>
</ul>
</div>
<div class="dropdown-center action-dropdown">
<button class="btn p-0 border-0 read-more-dot" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i data-feather="more-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-dropup border-color">
<li><a class="dropdown-item fs-14 text-body" href="profile.html"><i data-feather="eye"></i> View Profile</a></li>
<li><a class="dropdown-item fs-14 text-body" href="settings.html"><i data-feather="settings"></i> Settings</a></li>
<li><a class="dropdown-item fs-14 text-body" href="faqs.html"><i data-feather="alert-circle"></i> Help & feedback</a></li>
<li><a class="dropdown-item fs-14 text-body" href="logout.html"><i data-feather="log-out"></i> Logout</a></li>
</ul>
</div>
<div class="dropdown action-dropdown">
<button class="btn p-0 border-0 read-more-dot bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i data-feather="more-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-dropup border-color">
<li><a class="dropdown-item fs-14 text-body" href="profile.html"><i data-feather="eye"></i> View Profile</a></li>
<li><a class="dropdown-item fs-14 text-body" href="settings.html"><i data-feather="settings"></i> Settings</a></li>
<li><a class="dropdown-item fs-14 text-body" href="faqs.html"><i data-feather="alert-circle"></i> Help & feedback</a></li>
<li><a class="dropdown-item fs-14 text-body" href="logout.html"><i data-feather="log-out"></i> Logout</a></li>
</ul>
</div>