Accordion
Add a menu with
data-kt-menu="true"and activate accordion mode for submenu using
data-kt-menu-trigger="click"attribute on
menu-sub menu-sub-accordionsubmenus:
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-title-gray-700 menu-icon-gray-400 menu-arrow-gray-400 menu-bullet-gray-400 menu-arrow-gray-400 menu-state-bg fw-bold w-250px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item menu-accordion" data-kt-menu-trigger="click">
<!--begin::Menu link-->
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-bar-chart fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-accordion pt-3">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item menu-accordion" data-kt-menu-trigger="click">
<!--begin::Menu link-->
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-accordion pt-3">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-bell fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item menu-accordion" data-kt-menu-trigger="click">
<!--begin::Menu link-->
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-calendar-event fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-accordion pt-3">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3 active">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-gear fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
Dropdown
Add a menu with
data-kt-menu="true"and activate dropdown submenus using
data-kt-menu-trigger="hover"attribute on
menu-sub menu-sub-dropdownsubmenus:
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-gray-600 menu-state-bg fw-bold w-250px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu link-->
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-bar-chart fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown p-3 w-200px">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-bell fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu link-->
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-calendar-event fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown p-3 w-200px">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link px-1 py-3">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item">
<a href="#" class="menu-link py-3">
<span class="menu-icon">
<i class="bi bi-gear fs-3"></i>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
Toggle Dropdown
Use an external element to toggle a dropdown menu:
Bootstrap Menu can be combined with our exclusive Rotate components for greater functionality
<!--begin::Menu wrapper-->
<div>
<!--begin::Toggle-->
<button type="button" class="btn btn-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" data-kt-menu-offset="30px, 30px">
Click to open menu
<span class="svg-icon svg-icon-3 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Toggle-->
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content fs-6 text-dark fw-bolder px-3 py-4">Quick Actions</div>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mb-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
New Ticket
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
New Customer
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu item-->
<a href="#" class="menu-link px-3">
<span class="menu-title">New Group</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu item-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
Admin Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
Staff Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
Member Group
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">
New Contact
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mt-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3 py-3">
<a class="btn btn-light-primary btn-sm px-4" href="#">
Generate Reports
</a>
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</div>
<!--end::Dropdown wrapper-->
2022©
Keenthemes
