# Documentation v8.0.38

Preview Downloads Purchase

# Basic

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

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

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

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

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

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### 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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now