منو کشویی

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">دکمه کشویی</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#!">حذف</a>
        <a class="dropdown-item" href="#!">ویرایش</a>
        <a class="dropdown-item" href="#!">اشتراک گذاری</a>
    </div>
</div>

<div class="dropdown-menu">
    <a class="dropdown-item" href="#!">
        <div class="dropdown-item-icon">
            <i data-feather="user"></i>
        </div>
        پروفایل
    </a><a class="dropdown-item" href="#!">
        <div class="dropdown-item-icon">
            <i data-feather="settings"></i>
        </div>
        تنظیمات
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#!">
        <div class="dropdown-item-icon">
            <i data-feather="log-out"></i>
        </div>
        خروج
    </a>
</div>

<!-- Default Behavior -->
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="dropdownNoAnimation" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">بدون انیمیشن</button>
    <div class="dropdown-menu" aria-labelledby="dropdownNoAnimation">
        <a class="dropdown-item" href="#!">حذف</a>
        <a class="dropdown-item" href="#!">ویرایش</a>
        <a class="dropdown-item" href="#!">اشتراک گذاری</a>
    </div>
</div>

<!-- Fade In Animation -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" id="dropdownFadeIn" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">محو و ظاهر شدن</button>
    <div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownFadeIn">
        <a class="dropdown-item" href="#!">حذف</a>
        <a class="dropdown-item" href="#!">ویرایش</a>
        <a class="dropdown-item" href="#!">اشتراک گذاری</a>
    </div>
</div>

<!-- Fade In Up Animation -->
<div class="dropdown">
    <button class="btn btn-teal dropdown-toggle" id="dropdownFadeInUp" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">پایین به بالا</button>
    <div class="dropdown-menu animated--fade-in-up" aria-labelledby="dropdownFadeInUp">
        <a class="dropdown-item" href="#!">حذف</a>
        <a class="dropdown-item" href="#!">ویرایش</a>
        <a class="dropdown-item" href="#!">اشتراک گذاری</a>
    </div>
</div>

<div class="dropdown-notifications">
    <div class="dropdown-menu dropdown-menu-right border-0 shadow" aria-labelledby="navbarDropdownAlerts">
        <h6 class="dropdown-header dropdown-notifications-header">
            <i data-feather="bell"></i>
            هدر کشویی
        </h6>
        <!-- Example Item 1-->
        <a class="dropdown-item dropdown-notifications-item" href="#!">
            <div class="dropdown-notifications-item-icon bg-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></div>
            <div class="dropdown-notifications-item-content">
                <div class="dropdown-notifications-item-content-details">جزئیات آیتم کشویی</div>
                <div class="dropdown-notifications-item-content-text">این متن آیتم کشویی است. پس از یک عرض ثابت کوتاه می شود.</div>
            </div>
        </a>
        <!-- Example Item 2-->
        <a class="dropdown-item dropdown-notifications-item" href="#!">
            <div class="dropdown-notifications-item-icon bg-info">
                <i data-feather="bar-chart"></i>
            </div>
            <div class="dropdown-notifications-item-content">
                <div class="dropdown-notifications-item-content-details">جزئیات آیتم کشویی</div>
                <div class="dropdown-notifications-item-content-text">این متن آیتم کشویی است. پس از یک عرض ثابت کوتاه می شود.</div>
            </div>
        </a>
        <!-- Example Item 3-->
        <a class="dropdown-item dropdown-notifications-item" href="#!">
            <div class="dropdown-notifications-item-icon bg-danger">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="dropdown-notifications-item-content">
                <div class="dropdown-notifications-item-content-details">جزئیات آیتم کشویی</div>
                <div class="dropdown-notifications-item-content-text">این متن آیتم کشویی است. پس از یک عرض ثابت کوتاه می شود.</div>
            </div>
        </a>
        <!-- Example Item 4-->
        <a class="dropdown-item dropdown-notifications-item" href="#!">
            <div class="dropdown-notifications-item-icon bg-success">
                <i data-feather="user-plus"></i>
            </div>
            <div class="dropdown-notifications-item-content">
                <div class="dropdown-notifications-item-content-details">جزئیات آیتم کشویی</div>
                <div class="dropdown-notifications-item-content-text">این متن آیتم کشویی است. پس از یک عرض ثابت کوتاه می شود.</div>
            </div>
        </a>
        <a class="dropdown-item dropdown-notifications-footer" href="#!">فوتری کشویی</a>
    </div>
</div>