Logo

Documentation v8.2.1

Downloads Preview
Light
Dark
System

Overview

Bootstrap Menu is an exclusive component of Metronic that provides a simple and elegent solution for Bootstrap Menu with nested Dropdown and Accordion Submenus.

Usage

Bootstrap Menu's CSS and Javascript bundles are globally included in all pages. 
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initialization

  • Bootstrap Menu structure is split into 3 parts. The trigger element, the menu container and the menu items.
  • The trigger element can be any HTML element. For example, a button, an input field or an empty div.
  • Add data-kt-menu-trigger to the trigger element with a value of click or hover initialize the menu trigger type.
  • Add .menu CSS class to the menu container along with data-kt-menu="true" attribute to define the menu container. There are other options available as well, listed below.
  • Add .menu-item CSS class to the menu item elements to define the menu elements. Add .menu-link as a child element within .menu-item to enable a clean hover state effect.
  • Bootstrap Menu can be nested within itself to allow multiple tier menus. Please refer to our nested menu example below.
  • Bootstrap Menu supports all Bootstrap styling classes.
  • Bootstrap Menu instances can also be controlled programmatically. See below for more info.

Examples

Basic inline menu with link, icon and badge.
Example Link
Example Link 5
Example Link 
<!--begin::Menu-->
<div class="menu"> 
    <!--begin::Menu item-->
    <div class="menu-item">
        <a href="#" class="menu-link">
            <span class="menu-icon">
                <i class="ki-duotone ki-chart-simple-2 fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></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="ki-duotone ki-notification fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
            </span>
            <span class="menu-title">Example Link</span>
            <span class="menu-badge">
                <span class="badge badge-sm badge-circle badge-danger">5</span>
            </span>
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item">
        <a href="#" class="menu-link">
            <span class="menu-icon">
                <i class="ki-duotone ki-calendar fs-3"><span class="path1"></span><span class="path2"></span></i>
            </span>
            <span class="menu-title">Example Link</span>
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->
Use .menu-column class for a basic vertical menu:
Example Link
Example Link 5
Example Link 
<!--begin::Menu-->
<div class="menu menu-column w-200px"> 
    <!--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>
            <span class="menu-badge">
                <span class="badge badge-sm badge-circle badge-danger">5</span>
            </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-->
Preview Get Help Buy Now