Dropdown

Basic Dropdowns

To create any dropdown, use the dat-bs-toggle="dropdown" attribute.

<div class="common-flex"> 
 <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 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>
</div>

Rounded Dropdowns

Use rounded-pill class through to change rounded dropdowns.

<div class="common-flex">
 <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="#!">Dark</a></li>
     <li><a class="dropdown-item" href="#!">Light</a></li>
     <li><a class="dropdown-item" href="#!">Lighter</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">Secondary</button>
   <ul class="dropdown-menu dropdown-block">
     <li><a class="dropdown-item" href="#!">Dark</a></li>
     <li><a class="dropdown-item" href="#!">Light</a></li>
     <li><a class="dropdown-item" href="#!">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="#!">Dark</a></li>
     <li><a class="dropdown-item" href="#!">Light</a></li>
     <li><a class="dropdown-item" href="#!">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="#!">Dark</a></li>
     <li><a class="dropdown-item" href="#!">Light</a></li>
     <li><a class="dropdown-item" href="#!">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="#!">Dark</a></li>
     <li><a class="dropdown-item" href="#!">Light</a></li>
     <li><a class="dropdown-item" href="#!">Lighter</a></li>
   </ul>
 </div>
</div>

Split Dropdowns

Use dropdown-toggle-split for proper spacing around the dropdown caret.

GeneralChart
Animate AOS animations
EchartsApex chart
Email app Email compose
Flag icons Fontawesome icons Ico iconsFeather icons
Learning ListDetailed Course
<div class="common-flex">
 <div class="btn-group">
   <button class="btn btn-outline-primary">Maps</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-primary dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"> <a href="#!">Google map</a></li>
       <li class="dropdown-item"><a href="#!">Vector map</a></li>
     </ul>
   </div>
 </div>
 <div class="btn-group">
   <button class="btn btn-outline-secondary">Animations</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-secondary dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"><a href="#!">Animate </a></li>
       <li class="dropdown-item"><a href="#!">AOS animations</a></li>
     </ul>
   </div>
 </div>
 <div class="btn-group">
   <button class="btn btn-outline-success">Charts</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-success dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"><a href="#!">E-charts</a></li>
       <li class="dropdown-item"><a href="#!">Apex chart</a></li>
     </ul>
   </div>
 </div>
 <div class="btn-group">
   <button class="btn btn-outline-info">Email</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-info dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"><a href="#!">Email app </a></li>
       <li class="dropdown-item"><a href="#!">Email compose</a></li>
     </ul>
   </div>
 </div>
 <div class="btn-group">
   <button class="btn btn-outline-warning">Icons</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-warning dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"><a href="#!">Flag icon</a></li>
       <li class="dropdown-item"><a href="#!">Themify icon</a></li>
       <li class="dropdown-item"><a href="#!">Ico icon</a></li>
       <li class="dropdown-item"><a href="#">Feather icon</a></li>
     </ul>
   </div>
 </div>
 <div class="btn-group">
   <button class="btn btn-outline-danger">Learning</button>
   <div class="dropdown separated-btn">
     <button class="btn btn-danger dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><i class="icofont icofont-arrow-down"></i></button>
     <ul class="dropdown-menu">
       <li class="dropdown-item"><a href="#!">Learning list</a></li>
       <li class="dropdown-item"><a href="#!">Detailed course</a></li>
     </ul>
   </div>
 </div>
</div>

Heading Dropdown

Use heading-dropdown class to create dropdown heading.

<div class="common-flex">
 <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>
       <ul>
         <li><a class="dropdown-item" href="#!">Balloons</a></li>
         <li><a class="dropdown-item" href="#!">Cake </a></li>
       </ul>
     </li>
   </ul>
 </div>
</div>

With Input Type

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

  • Default checkbox
    Default radio 
<div class="common-flex">
 <btn-group>
   <button class="btn btn-warning" type="button" data-bs-toggle="dropdown" aria-expanded="false">Inputs</button>
   <ul class="dropdown-menu dropdown-block dropdown-wrapper dark-input-type">
     <li> 
       <div class="input-group rounded-0 border-0 shadow-none">
         <div class="input-group-text">
           <input class="form-check-input mt-0 checkbox-primary" type="checkbox" value="" aria-label="Checkbox for following text input">
         </div><span class="f-14">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 checkbox-primary" type="radio" value="" aria-label="Radio button for following text input">
         </div><span class="f-14">Default radio</span>
       </div>
     </li>
   </ul>
 </btn-group>
</div>

Dark Dropdown

To access the dark mode, use the dropdown-menu-dark class.

<div class="common-flex dark-dropdown">
 <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>
</div>

Unique Dropdown

Use data-bs-toggle="dropdown" to make any dropdown like form and text. 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. 

<div class="common-flex">
 <div class="btn-group">
   <button class="btn btn-primary 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 dark-form">
     <div class="mb-3">
       <label class="form-label f-w-500" 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 f-w-500" 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 checkbox-primary" id="dropdownCheck2" type="checkbox">
         <label class="form-check-label f-14" for="dropdownCheck2">Remember me</label>
       </div>
     </div>
     <button class="btn btn-primary" 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 form-wrapper">
     <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>
</div>

Justify Contents

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

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

Alignment Options

Use dropdown-menu-lg-start / dropstart / dropup / dropend this classes through change dropdown directions.

<div class="common-flex">
 <div class="btn-group">
   <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</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">
   <button class="btn btn-dark dropdown-toggle" type="button" 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 class="btn btn-dark dropdown-toggle" type="button" 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 class="btn btn-dark dropdown-toggle" type="button" 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 class="btn btn-dark dropdown-toggle" type="button" 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 class="btn btn-dark dropdown-toggle" type="button" 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 class="btn btn-dark dropdown-toggle" type="button" 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>
</div>

Helper Cards

Each dropdown uses data-bs-toggle='dropdown' attribute, which you can use to create helper class.

  • Learn More!

    There is a lot of information available here

  • Warning!

    Please! Check your notifications.

  • Danger

    It's a danger path.

<div class="common-flex">
 <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 pb-2">Learn More!</h6>
       <p class="dropdown-item">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 pb-2">Warning!</h6>
       <p class="dropdown-item 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 pb-2">Danger</h6>
       <p class="dropdown-item helper-truncate">It's a danger path.</p>
     </li>
   </ul>
 </div>
</div>

Divider Dropdowns

Use dropdown-divider class through separate groups of related menu items with a divider.

<div class="common-flex">
 <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="#!">Cricket</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>
</div>

Dropdown Sizing

Use btn-*[sm / lg] class through buttons of all sizes including default and split dropdown buttons.

<div class="common-flex">
 <div class="btn-group">
   <button class="btn btn-dark 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-outline-secondary btn-lg" type="button">Large split button</button>
   <button class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"></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>
 <div class="btn-group">
   <button class="btn btn-outline-secondary btn-sm" type="button">Small split button</button>
   <button class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"></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>

Dropdown options

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

<div class="common-flex dropdown-option">
 <div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">Offset</button>
   <ul class="dropdown-menu">
     <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 class="btn btn-secondary" type="button">Reference</button>
   <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"><span class="visually-hidden">Toggle Dropdown</span></button>
   <ul class="dropdown-menu">
     <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>