Dropdown

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

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"><a class="dropdown-item fw-bold fs-6" 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 rounded-0">
<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 f-14" 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-warning 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-success 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 dark-form">
<li>
<h6 class="fs-6 fw-bold pb-2">Learn More!</h6>
<p class="dropdown-item p-0 helper-truncate"> 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 dark-form">
<li>
<h6 class="fs-6 fw-bold pb-2">Warning!</h6>
<p class="dropdown-item p-0 helper-truncate"> 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 dark-form">
<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>