• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Dropdown

  2. Ui Kits
  3. Dropdown

Basic Dropdown

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

<div class="card-body">
<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 text-white 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>
</div>

Rounded Dropdown

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

<div class="card-body">
<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-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-info text-white 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 class="btn-group">
<button class="btn btn-warning text-white 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-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="#">Dark</a></li>
<li><a class="dropdown-item" href="#">Light </a></li>
<li><a class="dropdown-item" href="#">Lighter </a></li>
</ul>
</div>
</div>
</div>

Split Dropdown

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

GeneralChart
AnimateAOS animations
AnimateAOS animations
Email appEmail compose
Flag icons Fontawesome iconsIco iconsFeather icons
Learning ListDetailed Course
<div class="common-flex">
<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="iconly-Arrow-Down icli"></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="iconly-Arrow-Down icli"></i></button>
<div class="dropdown-content"><a href="#">Animate</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="iconly-Arrow-Down icli"></i></button>
<div class="dropdown-content"><a href="#">Animate</a><a href="#">AOS animations</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 text-white" type="button"><i class="iconly-Arrow-Down icli"></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 text-white" type="button"><i class="iconly-Arrow-Down icli"></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="iconly-Arrow-Down icli"></i></button>
<div class="dropdown-content"> <a href="#">Learning List</a><a href="#">Detailed Course</a></div>
</div>
</div>
</div>

Heading Dropdown

Main heading and any sub-content in dropdown. 

<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 class="border-bottom"><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>
</div>

With Input Type

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

  • Default checkbox
    Default radio 
<div class="common-flex">
<btn-group>
<button class="btn btn-warning text-white" 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" 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>
</div>

Dark Dropdown

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

<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

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-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-3 form-wrapper dark-form">
<div class="mb-2">
<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-2">
<label class="form-label" for="exampleDropdownFormPassword2">Password</label>
<input class="form-control" id="exampleDropdownFormPassword2" type="password" placeholder="Password">
</div>
<div class="mb-2">
<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-3 text-muted form-wrapper">
<p class="mb-2">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>
</div>

Justify Contents

Use the (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 text-white" 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>

Alignments

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

<div class="common-flex">
<div class="btn-group dropup">
<button class="btn btn-warning dropdown-toggle text-white" 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 drOpened">
<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>
</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.

<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 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 text-white" 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 text-white" 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">It's a danger path.</p>
</li>
</ul>
</div>
</div>

Divider Dropdown

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

<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="#">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>
</div>

Dropdown Sizing

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

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-info light btn-lg dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large button</button>
<ul class="dropdown-menu dropdown-block">
<li> <a class="dropdown-item" href="#">Small button</a></li>
<li><a class="dropdown-item" href="#">Medium button </a></li>
<li><a class="dropdown-item" href="#">Large button </a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Very large button </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="#">Small button</a></li>
<li><a class="dropdown-item" href="#">Very small button</a></li>
<li><a class="dropdown-item" href="#">Extra small button</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Extra extra small</a></li>
</ul>
</div>
</div>