Logo Logo

Documentation v1.2.1

Preview
Light
Dark
System

Basic

Apply the Bootstrap utilities  to customize menu elements spacing and font styles:
Example Link
Example Link
Example Link 
<!--begin::Menu-->
<div class="menu menu-column fw-semibold w-300px"> 
    <!--begin::Menu item-->
    <div class="menu-item my-1">
        <a href="#" class="menu-link px-4">
            <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>
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item my-1">
        <a href="#" class="menu-link px-4">
            <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 my-1">
        <a href="#" class="menu-link px-4">
            <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>
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->

Utilities

Below Menu utility classes are responsive-friendly and set using the format menu-{breakpoint}-{direction}-{property} where
  • {breakpoint} accepts Bootstrap breakpoints sm, md, lg, xl, xxl.
  • {direction} accepts up, down values to set breakpoint direction. E.g: .menu-lg-up-rounded, .menu-lg-down-rounded.
Class Description
.menu-{breakpoint}-{direction}-accordion
Used for menu item to set accordion submenu: 
<!-- General mode -->
<div class="menu-item menu-accordion" data-kt-menu-trigger="click">
    <a href="#" class="menu-link py-3">
        ...
    </a>
    <div class="menu-sub menu-sub-accordion pt-3">
        ...
    </div>
</div>
.menu-sub-{breakpoint}-{direction}-accordion
Sets accordion submenu for for breakpoint below lg: 
<div class="menu-item menu-accordion" data-kt-menu-trigger="click">
    <a href="#" class="menu-link py-3">
        ...
    </a>
    <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-up-dropdown pt-3">
        ...
    </div>
</div>
.menu-sub-{breakpoint}-{direction}-dropdown
Sets dropdown submenu: 
<div class="menu-item" data-kt-menu-trigger="click">
    <a href="#" class="menu-link py-3">
        ...
    </a>
    <div class="menu-sub menu-sub-dropdown pt-3">
        ...
    </div>
</div>
.menu-{breakpoint}-{direction}-inline
Sets horizontal menu mode for breakpoint below lg: 
<div class="menu menu-lg-down-inline menu-lg-up-columm" data-kt-menu-="true">
...
</div>
.menu-{breakpoint}-{direction}-fit
Resets menu items left and right paddings: 
<div class="menu menu-fit" data-kt-menu-="true">
...
</div>
.menu-sub-{breakpoint}-{direction}-column
Sets vertical menu mode for breakpoint below lg: 
<div class="menu menu-lg-up-inline menu-lg-down-columm" data-kt-menu-="true">
...
</div>
.menu-sub-{breakpoint}-{direction}-rounded
Sets border radius for menu items: 
<div class="menu menu-rounded" data-kt-menu-="true">
...
</div>
.menu-sub-{breakpoint}-{direction}-rounded-0
Resets border radius for menu items: 
<div class="menu menu-rounded menu-lg-down-rounded-0" data-kt-menu-="true">
...
</div>
.menu-sub-{breakpoint}-{direction}-pill
Sets pill style border radius for menu items: 
<div class="menu menu-pill" data-kt-menu-="true">
...
</div>

Colors

Use .menu-{color} to set a color  for menu title, icon, arrow and bullet:
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link 
<!--begin::Menu-->
<div class="menu menu-column menu-gray-600 fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->

<!--begin::Menu-->
<div class="menu menu-column menu-success fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->

<!--begin::Menu-->
<div class="menu menu-column menu-danger fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->
Use .menu-title-{color}, .menu-icon-{color}, .menu-bullet-{color} and .menu-arrow-{color} classes to set a color  for menu title, icon, arrow and bullet individually:
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link
Example Link 
<!--begin::Menu-->
<div class="menu menu-column menu-title-gray-800 menu-icon-primary fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->

<!--begin::Menu-->
<div class="menu menu-column menu-title-gray-600 menu-icon-info menu-arrow-warning fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->

<!--begin::Menu-->
<div class="menu menu-column menu-title-success menu-bullet-danger fw-semibold w-175px"> 
...
</div>
<!--end::Menu-->

States

Use below state classes to set background and font colors for menu item and child elements(title, icon, arrow and bullet):
  • .here indicates that menu item has an active child item within submenus.
  • .show indicates that menu item's submenu is shown.
  • .active indicates that menu item is active.
  • :hover indicates that menu item is hovered.
The below is the full list of a utility classes to use for menu and submenus:
Class Description
Background Color
.menu-state-bg Sets a background color $hover-bg for menu item on .here, .show, .active and :hover states.
.menu-here-bg Sets a background color $hover-bg for menu item on .here state.
.menu-show-bg Sets a background color $hover-bg for menu item on .show state.
.menu-active-bg Sets a background color $hover-bg for menu item on .active state.
.menu-hover-bg Sets a background color $hover-bg for menu item on :hover state.
.menu-state-bg-primary Sets a background color $primary for menu item on .here, .show, .active and :hover states.
.menu-here-bg-primary Sets a background color $primary for menu item on .here state.
.menu-show-bg-primary Sets a background color $primary for menu item on .show state.
.menu-active-bg-primary Sets a background color $primary for menu item on .active state.
.menu-hover-bg-primary Sets a background color $primary for menu item on :hover state.
.menu-state-bg-light-primary Sets a background color $primary-light for menu item on .here, .show, .active and :hover states.
.menu-here-bg-light-primary Sets a background color $primary-light for menu item on .here state.
.menu-show-bg-light-primary Sets a background color $primary-light for menu item on .show state.
.menu-active-bg-light-primary Sets a background color $primary-light for menu item on .active state.
.menu-hover-bg-light-primary Sets a background color $primary-light for menu item on :hover state.
Font Color
.menu-state-primary Sets a color $primary for menu title, icon, arrow and bullet on .here, .show, .active and :hover states.
.menu-here-primary Sets a color $primary for menu title, icon, arrow and bullet on .here state.
.menu-show-primary Sets a color $primary for menu title, icon, arrow and bullet on .show state.
.menu-active-primary Sets a color $primary for menu title, icon, arrow and bullet on .active state.
.menu-hover-primary Sets a color $primary for menu title, icon, arrow and bullet on :hover state.
.menu-state-title-primary Sets a color $primary for menu title on .here, .show, .active and :hover states.
.menu-here-title-primary Sets a color $primary for menu title on .here state.
.menu-show-title-primary Sets a color $primary for menu title on .show state.
.menu-active-title-primary Sets a color $primary for menu title on .active state.
.menu-hover-title-primary Sets a color $primary for menu title on :hover state.
.menu-state-icon-primary Sets a color $primary for menu icon on .here, .show, .active and :hover states.
.menu-here-icon-primary Sets a color $primary for menu icon on .here state.
.menu-show-icon-primary Sets a color $primary for menu icon on .show state.
.menu-active-icon-primary Sets a color $primary for menu icon on .active state.
.menu-hover-icon-primary Sets a color $primary for menu icon on :hover state.
.menu-state-bullet-primary Sets a color $primary for menu bullet on .here, .show, .active and :hover states.
.menu-here-bullet-primary Sets a color $primary for menu bullet on .here state.
.menu-show-bullet-primary Sets a color $primary for menu bullet on .show state.
.menu-active-bullet-primary Sets a color $primary for menu bullet on .active state.
.menu-hover-bullet-primary Sets a color $primary for menu bullet on :hover state.
.menu-state-arrow-primary Sets a color $primary for menu arrow on .here, .show, .active and :hover states.
.menu-here-arrow-primary Sets a color $primary for menu arrow on .here state.
.menu-show-arrow-primary Sets a color $primary for menu arrow on .show state.
.menu-active-arrow-primary Sets a color $primary for menu arrow on .active state.
.menu-hover-arrow-primary Sets a color $primary for menu arrow on :hover state.
$hover-bg is a global Bootstrap component hover color defined in src/sass/components/_variables.scss
Here Link
Example Link
Example Link
Example Link
Active Link
Show Link
Example Link
Example Link
Example Link
Hover Link 
<!--begin::Menu-->
<div class="menu menu-column menu-gray-600 menu-active-primary menu-hover-light-primary menu-here-light-primary menu-show-light-primary fw-semibold w-175px" data-kt-menu="true"> 
    <!--begin::Menu item-->
    <div class="menu-item here" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
        <!--begin::Menu link-->
        <a href="#" class="menu-link">
            <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">Here Link</span>
            <span class="menu-arrow"></span>
        </a>
        <!--end::Menu link-->

        <!--begin::Menu sub-->
        <div class="menu-sub menu-sub-dropdown w-175px py-2">
            <!--begin::Menu item-->
            <div class="menu-item">
                <a href="#" class="menu-link active">
                    <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>
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item">
                <a href="#" class="menu-link">
                    <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">
                <a href="#" class="menu-link">
                    <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>
                </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 active">
            <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">Active 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">
            <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">Show Link</span>
            <span class="menu-arrow"></span>
        </a>
        <!--end::Menu link-->

        <!--begin::Menu sub-->
        <div class="menu-sub menu-sub-dropdown w-175px py-2">
            <!--begin::Menu item-->
            <div class="menu-item">
                <a href="#" class="menu-link">
                    <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>
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item">
                <a href="#" class="menu-link">
                    <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">
                <a href="#" class="menu-link">
                    <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>
                </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">
            <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">Hover Link</span>
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->
try metronic buy mega bundle
Preview Get Help Buy Now