منوی کشویی
<div class="card">
<div class="card-header code-header">
<h5>دکمه تکی و منوی کشویی لینک</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">
دکمه کشویی
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
</ul>
</div>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
لینک کشویی
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>منوی زیر منوی کشویی</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">
زیرمنوی قابل کلیک
</button>
<div class="dropdown-menu mb-3">
<a href="#" class="dropdown-item">
<span> اقدام</span>
<i class="ti ti-user-plus ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>اقدام دیگری</span>
<i class="ti ti-circles-relation ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>یه چیز دیگه اینجا</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>گزینههای بیشتر</span>
<i class="ti ti-arrow-badge-right ms-auto"></i>
</a>
<div class="dropdown-menu sub-menu">
<a href="#" class="dropdown-item">
<span> اقدام</span>
<i class="ti ti-user-plus ms-auto"></i>
</a>
<a href="#" class="dropdown-item">
<span>اقدام دیگری</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">
منوی کشویی قابل جابجایی
</button>
<ul class="dropdown-menu bg-dark">
<li class="dropdown-item">
<a href="#">
<span> اقدام</span>
</a>
<i class="ti ti-user-plus ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>اقدام دیگری</span>
</a>
<i class="ti ti-circles-relation ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>یه چیز دیگه اینجا</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">
گزینههای بیشتر
</a>
<ul class="dropdown-menu hover-submenu bg-dark">
<li class="dropdown-item">
<a href="#">
<span> اقدام</span>
</a>
<i class="ti ti-user-plus ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>اقدام دیگری</span>
</a>
<i class="ti ti-circles-relation ms-auto"></i>
</li>
<li class="dropdown-item">
<a href="#">
<span>یه چیز دیگه اینجا</span>
</a>
<i class="ti ti-message-circle ms-auto"></i>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>نوع روشن کشویی</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>نوع کشویی بالا</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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">اقدام</button></li>
<li><button class="dropdown-item" type="button">اقدام دیگری</button></li>
<li><button class="dropdown-item" type="button">یه چیز دیگه اینجا</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>منوی کشویی محتوا</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">خوش اومدی جسی!</h5>
</div>
<!-- item-->
<a class="dropdown-item" href="#">اقدام</a>
<a class="dropdown-item" href="#">اقدام دیگری</a>
<a class="dropdown-item" href="#">یه چیز دیگه اینجا</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">پیوند جدا شده</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>
چند نمونه متن که آزادانه در منوی کشویی جریان دارند.
</p>
<p class="mb-0">
و این هم یک متن نمونهی دیگر.
</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">
فرمها <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="رمز عبور">
</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">مرا به خاطر بسپار</label>
</div>
</div>
<button type="submit" class="btn btn-primary">ورود</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>تنوع رنگ کشویی</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
</div>
<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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام</a></li>
<li><a class="dropdown-item" href="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
</div>
<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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</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="#">اقدام دیگری</a></li>
<li><a class="dropdown-item" href="#">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
</div>
<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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
</div>
</div>
<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">
منوی کشویی پیشفرض <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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">
قابل کلیک در خارج <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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">
قابل کلیک در داخل <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</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">
بستن دستی <i class="ti ti-circle-arrow-down"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
<li><a class="dropdown-item" href="#">آیتم منو</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>منو کشویی با آیکون</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> منوی کشویی پیشفرض
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right rtl-icon-flipped"></i> آیتم منو</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right rtl-icon-flipped"></i> آیتم منو</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right rtl-icon-flipped"></i> آیتم منو</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>منوی کشویی Hover </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">اقدام</a></li>
<li><a class="dropdown-item">اقدام دیگری</a></li>
<li><a class="dropdown-item">یه چیز دیگه اینجا</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item">پیوند جدا شده</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>آیکون</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> آیتم منو</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> آیتم منو</a>
</li>
<li><a class="dropdown-item" href="#"><i class="ti ti-arrow-badge-right"></i> آیتم منو</a>
</li>
</ul>
</div>
</div>
</div>
منوی کشویی رنگی
منوی کشویی سفارشی
-
برایان بیکر
مدیر
- اقدامات
- اقدام دیگری
- یه چیز دیگه اینجا
-
برایان بیکر
مدیر
- اقدامات
- اقدام دیگری
- یه چیز دیگه اینجا