Documentation v1.0.2

Preview

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-accordion submenus:
Use .menu-sub-indention class to add menu link indention through margin while .menu-link-indention adds the indention with padding.
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-title-gray-700 menu-icon-gray-500 menu-arrow-gray-500 menu-bullet-gray-500 menu-arrow-gray-500 menu-state-bg fw-semibold w-250px" data-kt-menu="true"> 
    <!--begin::Menu item-->
    <div class="menu-item menu-sub-indention menu-accordion" data-kt-menu-trigger="click">
        <!--begin::Menu link-->
        <a href="#" class="menu-link py-3">
            <span class="menu-icon">
                <i class="ki-duotone ki-chart-simple-2 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></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="ki-duotone ki-notification-on fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
            </span>
            <span class="menu-title">Example Link</span>
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item menu-link-indention menu-accordion" data-kt-menu-trigger="click">
        <!--begin::Menu link-->
        <a href="#" class="menu-link py-3">
            <span class="menu-icon">
                <i class="ki-duotone ki-calendar-2 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></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="ki-duotone ki-gear fs-3"><span class="path1"></span><span class="path2"></span></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-dropdown submenus:
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-gray-600 menu-state-bg fw-semibold 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="ki-duotone ki-chart-simple-2 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></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="ki-duotone ki-notification-on fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></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="ki-duotone ki-calendar-2 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></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 fs-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-semibold w-auto min-w-200 mw-300px" data-kt-menu="true">
        <!--begin::Menu item-->
        <div class="menu-item px-3">
            <div class="menu-content fs-6 text-gray-900 fw-bold 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-->

Grouped

Custom vertical menu with grouped items and item active state:
<!--begin::Menu-->
<div class="menu menu-rounded menu-column menu-active-bg menu-hover-bg menu-title-gray-700 fs-5 fw-semibold w-250px" id="#kt_aside_menu" data-kt-menu="true">
    <div class="menu-item">
        <div class="menu-content pb-2">
            <span class="menu-section text-muted text-uppercase fs-7 fw-bold">Public</span>
        </div>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link active border-3 border-start border-primary">
            <span class="menu-title">All Questions</span>
            <span class="menu-badge fs-7 fw-normal text-muted">675</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Popular</span>
            <span class="menu-badge fs-7 fw-normal text-muted">14</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Tags</span>
        </a>
    </div>
    <div class="menu-item pt-5">
        <div class="menu-content pb-2">
            <span class="menu-section text-muted text-uppercase fs-7 fw-bold">My Activity</span>
        </div>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Assigned to Me</span>
            <span class="menu-badge fs-7 fw-semibold text-muted">1</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Unresolved</span>
            <span class="menu-badge fs-7 fw-semibold text-muted">7</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Resolved</span>
            <span class="menu-badge fs-7 fw-semibold text-muted">668</span>
        </a>
    </div>
    <div class="menu-item">
        <a href="#" class="menu-link border-3 border-start border-transparent">
            <span class="menu-title">Archived</span>
            <span class="menu-badge fs-7 fw-semibold text-muted">39</span>
        </a>
    </div>
</div>
<!--end::Menu-->
Preview Get Help Buy Now