Loading...

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

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

Buy now !

#### 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"><a class="dropdown-item fw-bold fs-6">Party List </a></li>
    <ul>
    <li> <a class="dropdown-item">Balloons</a></li>
    <li> <a class="dropdown-item">Cake </a></li>
    </ul>
    </ul>
    </div>

#### With input type

Use the checkbox using dropdown`(type='checkbox'/'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.

Email address
Password
Remember me

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

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