باز شونده
شما می توانید از یک ردیف معمولی برای نمایش یک منو استفاده کنید که گزینه های شما را نگه می دارد.شما می توانید جهت گیری منو را تغییر دهید.استفاده ازis-right کلاس در باز شونده عنصر برای تنظیم آن به سمت راست به جای سمت چپ، که به طور پیش فرض است.استفاده از is-up کلاس آن را به یک dropup.برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger is-right">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger is-right is-up">
<div class="is-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
بازشونده رنگی
شما می توانید از تمام کلاس های رنگ موجود در دکمه های کشویی استفاده کنید، مانند is-primary or is-danger برای مثال.به اسناد دکمه برای گزینه های سفارشی سازی کامل مراجعه کنید.
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button is-primary" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
<div class="dropdown dropdown-trigger">
<div class="is-trigger">
<button class="button is-danger" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
منو شناور
Huro Dropdowns همچنین می تواند به عنوان یک منوی زمینه برگزاری یک آیکون تنها نمایش داده شود.آیکون می تواند هر چیزی باشد که می خواهید.این کشویی خاص خواهد بودis-dots کلاسلطفا برای جزئیات بیشتر در مورد استفاده از نشانه گذاری مراجعه کنید.
<div class="dropdown is-dots dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<i data-feather="more-vertical"></i>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
بازشونده مدرن
اگر در برخی نشانه های خاصی اضافه کنید، دکمه های کشویی معمولی را می توان به قطره های مدرن با آیکون حیاط متحرک افزایش داد.استفاده ازis-modern class on the باز شوندهعنصر همراه با نشانه گذاری خاص که در مثال کد ارائه شده است.تمام اصلاح کننده های دکمه هنوز اعمال می شود.
<div class="dropdown is-modern dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item font-size-base">
آیتم
</a>
<a class="dropdown-item font-size-base">
آیتم دیگر
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم فعال
</a>
<a href="#" class="dropdown-item font-size-base">
آیتم دیگر
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item font-size-base">
جدا کننده
</a>
</div>
</div>
</div>
منو با آیکون ها
منوهای کشویی می توانند آیکون ها و محتوای ساختاری بیشتری داشته باشند.شما می توانید از آنها برای نمایش هر نوع اطلاعات یا گزینه ها استفاده کنید.استفاده ازis-spaced با نشانه گذاری ارائه شده در مثال کد.
<div class="dropdown is-modern is-spaced dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-coins"></i>
</div>
<div class="meta">
<span>سرمایه گذاری</span>
<span>خرید سهام بیشتر</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-dollar-up"></i>
</div>
<div class="meta">
<span>Compare</span>
<span>مقایسه با سایر</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-bank"></i>
</div>
<div class="meta">
<span>تجارت</span>
<span>مشاهده فرصت ها</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-wallet-alt-1"></i>
</div>
<div class="meta">
<span>Wallet</span>
<span>باز کردن کیف پول باز</span>
</div>
</a>
</div>
</div>
</div>
منو با عکس
منوهای کشویی می توانند تصاویر و محتوای ساختاری بیشتری داشته باشند.شما می توانید از آنها برای نمایش هر نوع اطلاعات یا گزینه ها استفاده کنید.استفاده از is-spaced با نشانه گذاری ارائه شده در مثال کد.تصاویر داخلی را می توان با اضافه کردن is-rounded کلاس به عنصر تصویر.
<div class="dropdown is-modern is-spaced dropdown-trigger">
<div class="is-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Modern Drop</span>
<span class="caret">
<i data-feather="chevron-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>John Doe</span>
<span>Island</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Alex Miller</span>
<span>England</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Lana Davis</span>
<span>Germany</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<img class="item-img" src="https://via.placeholder.com/150x150"data-demo-src="assets/img/avatars/svg/1.gif" alt="">
<div class="meta">
<span>Stephane Robert</span>
<span>France</span>
</div>
</a>
</div>
</div>
</div>