Logo

Documentation v8.2.5

  • Home
  • Menu
  • Customization
Downloads 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, downvalues 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):
  • .hereindicates that menu item has an active child item within submenus.
  • .showindicates that menu item's submenu is shown.
  • .activeindicates that menu item is active.
  • :hoverindicates 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-bgfor menu item on .here, .show, .activeand :hoverstates.
.menu-here-bg Sets a background color $hover-bgfor menu item on .herestate.
.menu-show-bg Sets a background color $hover-bgfor menu item on .showstate.
.menu-active-bg Sets a background color $hover-bgfor menu item on .activestate.
.menu-hover-bg Sets a background color $hover-bgfor menu item on :hoverstate.
.menu-state-bg-primary Sets a background color $primaryfor menu item on .here, .show, .activeand :hoverstates.
.menu-here-bg-primary Sets a background color $primaryfor menu item on .herestate.
.menu-show-bg-primary Sets a background color $primaryfor menu item on .showstate.
.menu-active-bg-primary Sets a background color $primaryfor menu item on .activestate.
.menu-hover-bg-primary Sets a background color $primaryfor menu item on :hoverstate.
.menu-state-bg-light-primary Sets a background color $primary-lightfor menu item on .here, .show, .activeand :hoverstates.
.menu-here-bg-light-primary Sets a background color $primary-lightfor menu item on .herestate.
.menu-show-bg-light-primary Sets a background color $primary-lightfor menu item on .showstate.
.menu-active-bg-light-primary Sets a background color $primary-lightfor menu item on .activestate.
.menu-hover-bg-light-primary Sets a background color $primary-lightfor menu item on :hoverstate.
Font Color
.menu-state-primary Sets a color $primaryfor menu title, icon, arrow and bullet on .here, .show, .activeand :hoverstates.
.menu-here-primary Sets a color $primaryfor menu title, icon, arrow and bullet on .herestate.
.menu-show-primary Sets a color $primaryfor menu title, icon, arrow and bullet on .showstate.
.menu-active-primary Sets a color $primaryfor menu title, icon, arrow and bullet on .activestate.
.menu-hover-primary Sets a color $primaryfor menu title, icon, arrow and bullet on :hoverstate.
.menu-state-title-primary Sets a color $primaryfor menu title on .here, .show, .activeand :hoverstates.
.menu-here-title-primary Sets a color $primaryfor menu title on .herestate.
.menu-show-title-primary Sets a color $primaryfor menu title on .showstate.
.menu-active-title-primary Sets a color $primaryfor menu title on .activestate.
.menu-hover-title-primary Sets a color $primaryfor menu title on :hoverstate.
.menu-state-icon-primary Sets a color $primaryfor menu icon on .here, .show, .activeand :hoverstates.
.menu-here-icon-primary Sets a color $primaryfor menu icon on .herestate.
.menu-show-icon-primary Sets a color $primaryfor menu icon on .showstate.
.menu-active-icon-primary Sets a color $primaryfor menu icon on .activestate.
.menu-hover-icon-primary Sets a color $primaryfor menu icon on :hoverstate.
.menu-state-bullet-primary Sets a color $primaryfor menu bullet on .here, .show, .activeand :hoverstates.
.menu-here-bullet-primary Sets a color $primaryfor menu bullet on .herestate.
.menu-show-bullet-primary Sets a color $primaryfor menu bullet on .showstate.
.menu-active-bullet-primary Sets a color $primaryfor menu bullet on .activestate.
.menu-hover-bullet-primary Sets a color $primaryfor menu bullet on :hoverstate.
.menu-state-arrow-primary Sets a color $primaryfor menu arrow on .here, .show, .activeand :hoverstates.
.menu-here-arrow-primary Sets a color $primaryfor menu arrow on .herestate.
.menu-show-arrow-primary Sets a color $primaryfor menu arrow on .showstate.
.menu-active-arrow-primary Sets a color $primaryfor menu arrow on .activestate.
.menu-hover-arrow-primary Sets a color $primaryfor menu arrow on :hoverstate.
$hover-bgis 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-->