gif
Don't Miss Out! Out new update has been release.
gif
Something you love is now on sale!
Buy now !

Dropdown

  2. Ui Kits
  3. Dropdown

Basic Dropdown

When the.show class starts, dropdown appears. And .btn-* to change button dark background colors.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dashboard</button>
  <ul class="dropdown-menu dropdown-block">
    <li><a class="dropdown-item" href="#">Project</a></li>
    <li><a class="dropdown-item" href="#">Ecommerce</a></li>
    <li><a class="dropdown-item" href="#">Crypto</a></li>
</ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Ecommerce</button>
  <ul class="dropdown-menu dropdown-block">
    <li><a class="dropdown-item" href="#">Product</a></li>
    <li><a class="dropdown-item" href="#">Product details</a></li>
    <li><a class="dropdown-item" href="#">Cart</a></li>
</ul>
</div>
<div class="btn-group">
  <button class="btn btn-warning text-black dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Ui kits</button>
  <ul class="dropdown-menu dropdown-block">
    <li><a class="dropdown-item" href="#">Typography</a></li>
    <li><a class="dropdown-item" href="#">Avatars</a></li>
    <li><a class="dropdown-item" href="#">Grid</a></li>
</ul>
</div>
<div class="btn-group">
  <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Error page</button>
  <ul class="dropdown-menu dropdown-block">
    <li><a class="dropdown-item" href="#">Error 400</a></li>
    <li><a class="dropdown-item" href="#">Error 403</a></li>
    <li><a class="dropdown-item" href="#">Error 500</a></li>
</ul>
</div>

Rounded Dropdown

When the.show class starts, dropdown appears. And .rounded-pill to change rounded dropdowns.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->       
<div class="btn-group">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Primary-dark</a></li>
<li><a class="dropdown-item" href="#">Primary-light</a></li>
<li><a class="dropdown-item" href="#">Primary-lighter</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Success dark</a></li>
<li><a class="dropdown-item" href="#">Success light </a></li>
<li><a class="dropdown-item" href="#">Success lighter </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Info </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Info dark </a></li>
<li><a class="dropdown-item" href="#">Info light </a></li>
<li><a class="dropdown-item" href="#">Info lighter </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Warning dark </a></li>
<li><a class="dropdown-item" href="#">Warning light </a></li>
<li><a class="dropdown-item" href="#">Warning lighter </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Danger dark </a></li>
<li><a class="dropdown-item" href="#">Danger light </a></li>
<li><a class="dropdown-item" href="#">Danger lighter </a></li>
</ul>
</div>

Split Dropdown

When the.show class starts, dropdown appears. And split the dropdown .dropdown-toggle-split.

GeneralChart
Animate AOS animations
EchartsApex chart
Email app Email compose
Flag icons Fontawesome icons Ico iconsFeather icons
Learning ListDetailed Course
<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-outline-primary" type="button">Widgets</button>
<div class="dropdown separated-btn">
<button class="btn btn-primary" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">General</a><a href="#">Chart</a></div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary" type="button">Animations</button>
<div class="dropdown separated-btn">
<button class="btn btn-secondary" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">Animate </a><a href="#">Scroll reveal </a><a href="#">AOS animations</a></div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-success" type="button">Charts</button>
<div class="dropdown separated-btn">
<button class="btn btn-success" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">Echarts</a><a href="#">Apex chart</a><a href="#">Google chart</a><a href="#">Sparkline chart</a></div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-info" type="button">Email</button>
<div class="dropdown separated-btn">
<button class="btn btn-info" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">Email app </a><a href="#">Email compose</a></div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-warning" type="button">Icons</button>
<div class="dropdown separated-btn">
<button class="btn btn-warning" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">Flag icons </a><a href="#">Fontawesome icons </a><a href="#">Ico icons</a><a href="#">Feather icons </a></div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline-danger" type="button">Learning</button>
<div class="dropdown separated-btn">
<button class="btn btn-danger" type="button"><i class="icofont icofont-arrow-down"></i></button>
<div class="dropdown-content"><a href="#">Learning List</a><a href="#">Detailed Course</a></div>
</div>
</div>

Heading Dropdown

Main heading and any sub-content in dropdown.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Party</button>
<ul class="dropdown-menu dropdown-block">
<li class="border-bottom border-2"><a class="dropdown-item fw-bold fs-6 bg-light" href="#">Party List </a></li>
<ul>
<li> <a class="dropdown-item" href="#">Balloons</a></li>
<li> <a class="dropdown-item" href="#">Cake </a></li>
</ul>
</ul>
</div>

With Input Type

Use the checkbox using dropdown.(type='checkbox'/'radio').

  • Default checkbox
    Default radio 
<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<btn-group>
<button class="btn btn-warning" type="button" data-bs-toggle="dropdown" aria-expanded="false">Inputs </button>
<ul class="dropdown-menu dropdown-block p-3">
<li>
<div class="input-group mb-2 rounded-0 border-0 shadow-none">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
</div><span>Default checkbox</span>
</div>
<div class="input-group rounded-0 border-0 shadow-none">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
</div><span>Default radio</span>
</div>
</li>
</ul>
</btn-group>

Dark Dropdown

.dropdown-menu-dark class through make dark mode.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dark Night</button>
<ul class="dropdown-menu dropdown-menu-dark dropdown-block">
<li><a class="dropdown-item active" href="#">Dark moon</a></li>
<li><a class="dropdown-item" href="#">Dark owl </a></li>
<li><a class="dropdown-item" href="#">Nightfall</a></li>
</ul>

Unique Dropdown

Unique way to represent form dropdown and text dropdown.

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

And this is more example text. 

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Dropdown form</button>
<form class="dropdown-menu p-4 form-wrapper">
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormEmail2">Email address</label>
<input class="form-control" id="exampleDropdownFormEmail2" type="email" placeholder="email@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="exampleDropdownFormPassword2">Password</label>
<input class="form-control" id="exampleDropdownFormPassword2" type="password" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" id="dropdownCheck2" type="checkbox">
<label class="form-check-label" for="dropdownCheck2">Remember me</label>
</div>
</div>
<button class="btn btn-dark" type="submit">Sign in</button>
</form>
</div>
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text </button>
<div class="dropdown-menu p-4 text-muted form-wrapper">
<p>Some example text that&apos;s free-flowing within the dropdown menu.</p>
<p class="mb-0">And this is more example text. </p>
</div>
</div>

Justify Contents

Use the (text-start/text-center/text-end) to change dropdown texts.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="common-flex">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-left</button>
<ul class="dropdown-menu dropdown-block text-start">
<li><a class="dropdown-item" href="#">Hello..</a></li>
<li><a class="dropdown-item" href="#">How are you?</a></li>
<li><a class="dropdown-item" href="#">What are you doing?</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-center</button>
<ul class="dropdown-menu dropdown-block text-center">
<li><a class="dropdown-item" href="#">Chocolate</a></li>
<li><a class="dropdown-item" href="#">Ice-cream</a></li>
<li><a class="dropdown-item" href="#">Trophy</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-right </button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">I'm fine.</a></li>
<li><a class="dropdown-item" href="#">ohh wow!!</a></li>
<li><a class="dropdown-item" href="#">That's the good news! </a></li>
</ul>
</div>

Alignments

Use the (dropstart/dropup/dropend) this class through change dropdown directions.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group dropup">
<button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning top</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Be careful </a></li>
<li><a class="dropdown-item" href="#">Notifications</a></li>
<li><a class="dropdown-item" href="#">Beware </a></li>
</ul>
</div>
<div class="btn-group dropend">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success right</button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">Good luck </a></li>
<li><a class="dropdown-item" href="#">Good job </a></li>
<li><a class="dropdown-item" href="#">Done!</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary bottom</button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">It's important</a></li>
<li><a class="dropdown-item" href="#">Happy life </a></li>
<li><a class="dropdown-item" href="#">Another work</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger left</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Threat </a></li>
<li><a class="dropdown-item" href="#">Dangerous</a></li>
<li><a class="dropdown-item" href="#">Alert </a></li>
</ul>
</div>

Helper Card

When the.show class starts, dropdown appears.

  • Learn More!

    There is a lot of information available here

  • Warning!

    Please! Check your notifications.

  • Danger

    It's a danger path.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Helper Card</button>
<ul class="dropdown-menu dropdown-block p-3">
<li>
<h6 class="fs-6 fw-bold pb-2">Learn More!</h6>
<p class="dropdown-item p-0 helper-truncate" href="#"> There is a lot of information available here</p>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning Card</button>
<ul class="dropdown-menu dropdown-block p-3">
<li>
<h6 class="fs-6 fw-bold pb-2">Warning!</h6>
<p class="dropdown-item p-0 helper-truncate" href="#"> Please! Check your notifications.</p>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Alert Card</button>
<ul class="dropdown-menu dropdown-block p-3">
<li>
<h6 class="fs-6 fw-bold pb-2">Danger</h6>
<p class="dropdown-item p-0 helper-truncate" href="#">It's a danger path.</p>
</li>
</ul>
</div>

Divider Dropdown

When the.show class starts, dropdown appears. And .dropdown-divider to change dropdown section.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Wishlist</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Shoes </a></li>
<li><a class="dropdown-item" href="#">Bag</a></li>
<li><a class="dropdown-item" href="#">Clothes </a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Sports </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Badminton</a></li>
<li><a class="dropdown-item" href="#">Tenis </a></li>
<li><a class="dropdown-item" href="#">Kho-Kho</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Colors </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Orange </a></li>
<li><a class="dropdown-item" href="#">Yellow </a></li>
<li><a class="dropdown-item" href="#">Red </a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

Dropdown Sizing

When the.show class starts, dropdown appears. And [.btn-lg/.btn-sm]class through button size changed.

<!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)-->  
<div class="btn-group">
<button class="btn btn-info light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large button </button>
<ul class="dropdown-menu dropdown-block">
<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 class="btn-group">
<button class="btn btn-dark light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Small button </button>
<ul class="dropdown-menu dropdown-block">
<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>