Documentation v1.1.1

Preview Purchase

Overview

Bootstrap Menu is an exclusive component of Craft 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 containerand the menu items.
  • The trigger element can be any HTML element. For example, a button, an inputfield or an empty div.
  • Add data-kt-menu-triggerto the trigger element with a value of clickor hoverinitialize the menu trigger type.
  • Add .menuCSS 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-itemCSS class to the menu item elements to define the menu elements. Add .menu-linkas a child element within .menu-itemto 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.
<!--begin::Menu-->
<div class="menu"> 
    <!--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-->
Use .menu-columnclass for a basic vertical menu:
<!--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-->
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now