#### Dropdown

##### Single Button and Link Dropdown

Dropdown link

    <div class="card">
      <div class="card-header code-header">
     <h5>Single Button and Link Dropdown</h5>
    </div>
    <div class="card-body d-flex flex-wrap gap-2">
      <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
       aria-expanded="false">
       Dropdown button
       </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="dropdown">
       <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropdown link
      </a>
      <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>
    </div>

##### Dropdown Submenu Menu

                          <div class="card">
                           <div class="card-header">
                           <h5>Dropdown submenu Menu</h5>
                           </div>
                           <div class="card-body d-flex flex-wrap gap-2">
                           <div class="app-dropdown">
                           <button class="btn btn-primary border-0 " type="button" data-bs-toggle="dropdown"
                           data-bs-auto-close="outside" aria-expanded="false">
                           Clickable Submenu
                           </button>
                           <div class="dropdown-menu mb-3">
                           <a href="#" class="dropdown-item">
                           <span> Action</span>
                           <i class="ti ti-user-plus ms-auto"></i>
                           </a>
                           <a href="#" class="dropdown-item">
                           <span>Another action</span>
                           <i class="ti ti-circles-relation ms-auto"></i>
                           </a>
                           <a href="#" class="dropdown-item">
                           <span>Something else here</span>
                           <i class="ti ti-message-circle ms-auto"></i>
                           </a>
                           <hr class="dropdown-divider">
                           <a class="dropdown-item border-0" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                           <span>More Option</span>
                           <i class="ti ti-arrow-badge-right ms-auto"></i>
                           </a>
                           <div class="dropdown-menu sub-menu">
                           <a href="#" class="dropdown-item">
                           <span> Action</span>
                           <i class="ti ti-user-plus ms-auto"></i>
                           </a>
                           <a href="#" class="dropdown-item">
                           <span>Another action</span>
                           <i class="ti ti-circles-relation ms-auto"></i>
                           </a>
                           </div>
                           </div>
                           </div>

                           <div class="hover-dropdown app-hover-dropdown">
                           <button class="btn btn-primary dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown"
                           data-trigger="hover" aria-expanded="false">
                           Hoverable Dropdown
                           </button>
                           <ul class="dropdown-menu bg-dark">
                           <li class="dropdown-item">
                           <a href="#">
                           <span> Action</span>
                           </a>
                           <i class="ti ti-user-plus ms-auto"></i>
                           </li>
                           <li class="dropdown-item">
                           <a href="#">
                           <span>Another action</span>
                           </a>
                           <i class="ti ti-circles-relation ms-auto"></i>
                           </li>
                           <li class="dropdown-item">
                           <a href="#">
                           <span>Something else here</span>
                           </a>
                           <i class="ti ti-message-circle ms-auto"></i>
                           </li>
                           <li>
                           <hr class="dropdown-divider">
                           </li>
                           <li class="hover-dropdown">
                           <a role="button" class="dropdown-item waves-effect waves-light" data-bs-toggle="dropdown"
                           data-trigger="hover" aria-expanded="false">
                           More Option
                           </a>
                           <ul class="dropdown-menu hover-submenu bg-dark">
                           <li class="dropdown-item">
                           <a href="#">
                           <span> Action</span>
                           </a>
                           <i class="ti ti-user-plus ms-auto"></i>
                           </li>
                           <li class="dropdown-item">
                           <a href="#">
                           <span>Another action</span>
                           </a>
                           <i class="ti ti-circles-relation ms-auto"></i>
                           </li>
                           <li class="dropdown-item">
                           <a href="#">
                           <span>Something else here</span>
                           </a>
                           <i class="ti ti-message-circle ms-auto"></i>
                           </li>
                           </ul>
                           </li>

                           </ul>
                           </div>

                           </div>
                          </div>

##### Menu Content Dropdown

                          <div class="card">
                           <div class="card-header">
                           <h5>Menu Content Dropdown</h5>
                           </div>
                           <div class="card-body">
                           <div class="d-flex flex-wrap gap-2">
                           <div class="btn-group btn-rtl">
                           <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                           Header <i class="mdi mdi-chevron-down"></i>
                           </button>
                           <div class="dropdown-menu">
                           <div class="dropdown-header noti-title">
                           <h5 class="text-muted text-truncate mn-0">Welcome Jessie!</h5>
                           </div>
                           <!-- item-->
                           <a class="dropdown-item" href="#">Action</a>
                           <a class="dropdown-item" href="#">Another action</a>
                           <a class="dropdown-item" href="#">Something else here</a>
                           <div class="dropdown-divider"></div>
                           <a class="dropdown-item" href="#">Separated link</a>
                           </div>
                           </div>
                           <div class="btn-group btn-rtl">
                           <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                           Text <i class="mdi mdi-chevron-down"></i>
                           </button>
                           <div class="dropdown-menu dropdown-menu-md p-3">
                           <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 class="btn-group btn-rtl">
                           <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                           Forms <i class="mdi mdi-chevron-down"></i>
                           </button>
                           <div class="dropdown-menu dropdown-menu-md form-dropdown p-4">
                           <form>
                           <div class="mb-2">
                           <label class="form-label" for="exampleDropdownFormEmail">Email address</label>
                           <input type="email" class="form-control" id="exampleDropdownFormEmail"
                           placeholder="email@example.com">
                           </div>
                           <div class="mb-2">
                           <label class="form-label" for="exampleDropdownFormPassword">Password</label>
                           <input type="password" class="form-control" id="exampleDropdownFormPassword"
                           placeholder="Password">
                           </div>
                           <div class="mb-2">
                           <div class="form-check custom-checkbox">
                           <input type="checkbox" class="form-check-input" id="rememberdropdownCheck">
                           <label class="form-check-label" for="rememberdropdownCheck">Remember me</label>
                           </div>
                           </div>
                           <button type="submit" class="btn btn-primary">Sign in</button>
                           </form>
                           </div>
                           </div>
                           </div>
                           </div>
                          </div>

##### Dropdown Color Variant

                            <div class="card">
                            <div class="card-header">
                            <h5>Dropdown Color Variant</h5>
                            </div>
                            <div class="card-body d-flex flex-wrap gap-2">
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Primary
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Secondary
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Success
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Danger
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Warning
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Info
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Light
                            </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>
                            <div>
                            <div class="btn-group btn-rtl">
                            <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dark
                            </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>
                            </div>
                            </div>

##### Sizing Dropdown

                          <div class="card">
                          <div class="card-header">
                          <h5>Sizing Dropdown</h5>
                          </div>
                          <div class="card-body d-flex flex-wrap gap-3">
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Large button
                          </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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-secondary btn-lg">Large split button</button>
                          <button type="button"
                          class="btn btn-secondary opacity-75 btn-lg dropdown-toggle dropdown-toggle-split"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Small button
                          </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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-danger btn-sm"> Small split button</button>
                          <button type="button"
                          class="btn btn-danger opacity-75 btn-sm dropdown-toggle dropdown-toggle-split"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <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>
                          </div>
                          </div>

##### Dropdown Outline Variant

                          <div class="card">
                          <div class="card-header">
                          <h5>Dropdown Outline Variant</h5>
                          </div>
                          <div class="card-body d-flex flex-wrap gap-2">
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-primary">Primary</button>
                          <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Primary</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-secondary">Secondary</button>
                          <button type="button"
                          class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Secondary</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-success">Success</button>
                          <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Success</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-danger">Danger</button>
                          <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Danger</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-warning">Warning</button>
                          <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Warning</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-info">Info</button>
                          <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Info</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-light">Light</button>
                          <button type="button" class="btn btn-outline-light dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Light</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>
                          <div>
                          <div class="btn-group btn-rtl">
                          <button type="button" class="btn btn-outline-dark">Dark</button>
                          <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split p-2"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          <span class="visually-hidden">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Dark</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>
                          </div>

                          </div>

##### Alignment Options

                          <div class="card">
                          <div class="card-header">
                          <h5>Alignment Options</h5>
                          </div>
                          <div class="card-body d-flex flex-wrap gap-2 alignment-dropdown">
                          <div class="btn-group btn-rtl">
                          <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Dropdown <i class="ti ti-arrow-big-down-line"></i>
                          </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 btn-rtl">
                          <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Right-aligned menu <i class="ti ti-arrow-big-down-line"></i>
                          </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 btn-rtl">
                          <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown"
                          data-bs-display="static" aria-expanded="false"> right-aligned lg <i
                          class="ti ti-arrow-big-down-line"></i>
                          </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 btn-rtl">
                          <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown"
                          data-bs-display="static" aria-expanded="false"> left-aligned lg <i
                          class="ti ti-arrow-big-down-line"></i>
                          </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 type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          <i class="ti ti-arrow-big-left-line"></i> 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 type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Dropend <i class="ti ti-arrow-big-right-line"></i>
                          </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 type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Dropup <i class="ti ti-arrow-big-up-line"></i>
                          </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>
                          </div>

##### Dropdown Light Variant

                         <div class="card">
                         <div class="card-header">
                         <h5>Dropdown Light Variant</h5>
                         </div>
                         <div class="card-body d-flex flex-wrap gap-2">
                         <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-primary ">Primary </button>
                           <button type="button" class="btn btn-light-primary dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>

                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-secondary">Secondary</button>
                           <button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-success">Success</button>
                           <button type="button" class="btn btn-light-success dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-danger">Danger</button>
                           <button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-warning">Warning</button>
                           <button type="button" class="btn btn-light-warning dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-info">Info</button>
                           <button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-light">Light</button>
                           <button type="button" class="btn btn-light-light dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                          <div>
                          <div class="btn-group dropdown-light btn-rtl">
                           <button type="button" class="btn btn-light-dark">Dark</button>
                           <button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split p-2"
                           data-bs-toggle="dropdown" aria-expanded="false">
                           <span class="visually-hidden">Toggle Dropdown</span>
                           <i class="ti ti-arrow-badge-down f-s-16"></i>
                           </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>
                         </div>

                         </div>

##### Dropup Variation

                           <div class="card">
                             <div class="card-header">
                              <h5>Dropup Variation</h5>
                             </div>
                             <div class="card-body d-flex flex-wrap gap-2">
                              <div class="btn-group dropup dropdown-light btn-rtl">
                               <button type="button" class="btn btn-light-primary dropdown-toggle" data-bs-toggle="dropdown"
                             aria-expanded="false">
                             Dropup <i class="ti ti-arrow-narrow-up"></i>
                               </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 class="btn-group dropup dropdown-light btn-rtl">
                               <button type="button" class="btn btn-light-secondary">
                             Split dropup
                               </button>
                               <button type="button" class="btn btn-light-secondary dropdown-toggle dropdown-toggle-split"
                             data-bs-toggle="dropdown" aria-expanded="false">
                             <span class="visually-hidden">Toggle Dropdown </span>
                             <i class="ti ti-arrow-narrow-up"></i>
                               </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 class="btn-group dropend dropdown-light">
                               <button type="button" class="btn btn-light-success dropdown-toggle" data-bs-toggle="dropdown"
                             aria-expanded="false">
                             Dropend <i class="ti ti-arrow-narrow-right"></i>
                               </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 class="btn-group dropend dropdown-light btn-rtl">
                               <button type="button" class="btn btn-light-danger">
                             Split dropend
                               </button>
                               <button type="button" class="btn btn-light-danger dropdown-toggle dropdown-toggle-split"
                             data-bs-toggle="dropdown" aria-expanded="false">
                             <span class="visually-hidden">Toggle Dropend </span>
                             <i class="ti ti-arrow-narrow-right"></i>
                               </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 class="btn-group dropstart dropdown-light">
                               <button type="button" class="btn btn-light-warning dropdown-toggle" data-bs-toggle="dropdown"
                             aria-expanded="false">
                             <i class="ti ti-arrow-narrow-left"></i> Dropstart
                               </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 class="btn-group dropstart dropdown-light btn-rtl">
                               <button type="button" class="btn btn-light-info dropdown-toggle dropdown-toggle-split"
                             data-bs-toggle="dropdown" aria-expanded="false">
                             <span class="visually-hidden">Toggle Dropstart</span>
                             <i class="ti ti-arrow-narrow-left"></i>
                               </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>
                               <button type="button" class="btn btn-light-info">
                             Split dropstart
                               </button>
                              </div>
                              <div class="dropdown dropdown-light">
                               <button class="btn btn-light-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
                             aria-expanded="false">
                             Dropup <i class="ti ti-arrow-narrow-down"></i>
                               </button>
                               <ul class="dropdown-menu">
                             <li><button class="dropdown-item" type="button">Action</button></li>
                             <li><button class="dropdown-item" type="button">Another action</button></li>
                             <li><button class="dropdown-item" type="button">Something else here</button></li>
                               </ul>
                              </div>
                              <div class="btn-group dropdown-light btn-rtl">
                               <button type="button" class="btn btn-light-dark">Dropup</button>
                               <button type="button" class="btn btn-light-dark dropdown-toggle dropdown-toggle-split"
                             data-bs-toggle="dropdown" aria-expanded="false">
                             <span class="visually-hidden">Toggle Dropdown</span>
                             <i class="ti ti-arrow-narrow-down"></i>
                               </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>
                            </div>

##### Auto Close Behaviour

                           <div class="card">
                            <div class="card-header">
                          <h5>Auto close behavior</h5>
                            </div>
                            <div class="card-body d-flex flex-wrap gap-2">
                          <div class="btn-group dropdown-light btn-rtl">
                           <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            data-bs-auto-close="true" aria-expanded="false">
                            Default dropdown <i class="ti ti-circle-arrow-down"></i>
                           </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 dropdown-light btn-rtl">
                           <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            data-bs-auto-close="inside" aria-expanded="false">
                            Clickable outside <i class="ti ti-circle-arrow-down"></i>
                           </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 dropdown-light btn-rtl">
                           <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            data-bs-auto-close="outside" aria-expanded="false">
                            Clickable inside <i class="ti ti-circle-arrow-down"></i>
                           </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 dropdown-light btn-rtl">
                           <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
                            data-bs-auto-close="false" aria-expanded="false">
                            Manual close <i class="ti ti-circle-arrow-down"></i>
                           </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>
                           </div>

##### With Icon Dropdown

     <div class="card">
      <div class="card-header">
       <h5>With Icon Dropdown</h5>
      </div>
      <div class="card-body">
      <div class="btn-group btn-rtl">
       <button class="btn btn-light-secondary dropdown-toggle" type="button"
       data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
       <i class="ti ti-arrow-bar-down"></i> Default dropdown
       </button>
       <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
       </li>
       <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
       </li>
       <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
       </li>
       </ul>
      </div>
      </div>
     </div>

##### Hover Dropdown

          <div class="card">
          <div class="card-header">
          <h5>Hover Dropdown </h5>
          </div>
          <div class="card-body">
           <div class="btn-group hover-dropdown">
           <button type="button" class="btn btn-light-primary dropdown-toggle waves-effect waves-light"
            data-bs-toggle="dropdown" data-trigger="hover" aria-expanded="false">Hover</button>
           <ul class="dropdown-menu">
            <li><a class="dropdown-item">Action</a></li>
            <li><a class="dropdown-item">Another action</a></li>
            <li><a class="dropdown-item">Something else here</a></li>
            <li>
            <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item">Separated link</a></li>
           </ul>
           </div>
          </div>
          </div>

##### Icon

     <div class="card">
      <div class="card-header">
       <h5>Icon</h5>
      </div>
      <div class="card-body">
       <div class="btn-group dropdown-icon-none">
        <button class="btn btn-light-success icon-btn b-r-4 dropdown-toggle" type="button"
         data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
         <i class="ti ti-capture"></i>
        </button>
        <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
         </li>
         <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
         </li>
         <li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> Menu item</a>
         </li>
        </ul>
       </div>
      </div>
     </div>

##### Custom Dropdown Menu

##### Color Dropdown Menu