Logo

Documentation v1.0.6

  • General
  • Menu
  • Customization
Preview Upgrade to Pro

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, 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-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):
  • .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-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-->
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
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