<!--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-->
												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}-accordionUsed for menu item to set accordion submenu: 
 | 
| .menu-sub-{breakpoint}-{direction}-accordionSets accordion submenu for for breakpoint below
																 lg:
 | 
| .menu-sub-{breakpoint}-{direction}-dropdownSets dropdown submenu: 
 | 
| .menu-{breakpoint}-{direction}-inlineSets horizontal menu mode for breakpoint below
																 lg:
 | 
| .menu-{breakpoint}-{direction}-fitResets menu items left and right paddings: 
 | 
| .menu-sub-{breakpoint}-{direction}-columnSets vertical menu mode for breakpoint below
																 lg:
 | 
| .menu-sub-{breakpoint}-{direction}-roundedSets border radius for menu items: 
 | 
| .menu-sub-{breakpoint}-{direction}-rounded-0Resets border radius for menu items: 
 | 
| .menu-sub-{breakpoint}-{direction}-pillSets pill style border radius for menu items: 
 | 
.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-->
													.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-->
													.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.| 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
<!--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-->