Documentation v8.1.1

Preview Downloads Purchase

Basic

Apply the Bootstrap utilities to customize menu elements spacing and font styles:

<!--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="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:

<!--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:

<!--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-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-bgis a global Bootstrap component hover color defined in src/sass/components/_variables.scss

<!--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="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-->