Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Dropdowns

##### Basic Dropdowns

To create any dropdown, use `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.

    <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')`.

    <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.

Email Address
Password
Remember me

    <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 the `data-bs-toggle='dropdown'` attribute, which you can use to create a helper class.

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