Logo

Documentation v1.0.4

  • General
  • Menu
  • Customization
Preview Purchase

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-bold w-300px">
    <!--begin::Menu item-->
    <div class="menu-item my-1">
        <a href="#" class="menu-link px-4">
            <span class="menu-icon">
                <i class="bi bi-bar-chart fs-3"></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="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 my-1">
        <a href="#" class="menu-link px-4">
            <span class="menu-icon">
                <i class="bi bi-calendar-event fs-3"></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-bold w-175px">
...
</div>
<!--end::Menu-->

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

<!--begin::Menu-->
<div class="menu menu-column menu-danger fw-bold 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-bold w-175px">
...
</div>
<!--end::Menu-->

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

<!--begin::Menu-->
<div class="menu menu-column menu-title-success menu-bullet-danger fw-bold 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-bold 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="bi bi-bar-chart fs-3"></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="bi bi-bar-chart fs-3"></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="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">
                <a href="#" class="menu-link">
                    <span class="menu-icon">
                        <i class="bi bi-calendar-event fs-3"></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="bi bi-bell fs-3"></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="bi bi-calendar-event fs-3"></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="bi bi-bar-chart fs-3"></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="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">
                <a href="#" class="menu-link">
                    <span class="menu-icon">
                        <i class="bi bi-calendar-event fs-3"></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="bi bi-gear fs-3"></i>
            </span>
            <span class="menu-title">Hover Link</span>
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now