Logo

Documentation v1.0.0

  • General
  • Menu Exclusive
Preview Upgrade to Pro

Overview

Bootstrap Menu is an exclusive component of Ceres HTML Free 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.

Basic Example

Here's a basic example of Bootstrap Menu.
Bootstrap Menu can be combined with our exclusive Toggle and Rotate components for greater functionality.
Menu item 1
Menu item 2
Menu item 3
Menu item 4 
<!--begin::Trigger-->
<button type="button" class="btn btn-primary"
    data-kt-menu-trigger="click"
    data-kt-menu-placement="bottom-start">
    Click to open menu
    <span class="svg-icon svg-icon-5 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Trigger-->

<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
    data-kt-menu="true">
    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 1
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 2
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 3
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 4
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->

Nested Menu Example

Here's a nested example of Bootstrap Menu.
Bootstrap Menu can be nested within itself to allow multiple tier menus
Menu item 1
Menu item 2
Nested Menu
Nested Menu item 1
Nested Menu item 2
Nested Menu
Nested Menu item 1
Nested Menu item 2
Nested Menu item 3
Nested Menu item 4
Nested Menu item 4
Menu item 4 
<!--begin::Trigger-->
<button type="button" class="btn btn-primary"
    data-kt-menu-trigger="click"
    data-kt-menu-placement="bottom-start">
    Click to open main menu
    <span class="svg-icon svg-icon-5 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Trigger-->

<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
    data-kt-menu="true">
    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 1
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 2
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <div class="menu-link px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
            Nested Menu

            <span class="svg-icon svg-icon-5 rotate-180 ms-auto me-0">...</span>
        </div>

        <!--begin::Menu-->
        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
            data-kt-menu="true">
            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 1
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 2
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 3
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 4
                </a>
            </div>
            <!--end::Menu item-->
        </div>
        <!--end::Menu-->
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 4
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->

Markup Reference

Bootstrap Menu uses HTML attributes to set specific configurations. Here are the references for each below
HTML Attribute references
Name Type Description
data-kt-menu-trigger mandatory Sets the trigger method. Accepts values clickor hover
This is also compatible with Bootstrap's standard breakpoint sizing (eg: sm, md, lg, xl) with similar pxor %values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.
For example: {default:'click', 'lg': 'hover'}indicates that the drawer view component has bottomposition value width on screens larger than lgand topfor every other screen size.
data-kt-menu-placement mandatory Sets the menu position relative the the trigger element. Accepts values top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-startand right-end
This is also compatible with Bootstrap's standard breakpoint sizing (eg: sm, md, lg, xl) with similar pxor %values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.
For example: {default:'top', 'g': 'bottom'}indicates that the drawer view component has bottomposition value width on screens larger than lgand topfor every other screen size.
data-kt-menu-offset optional
Sets the menu offset position relative the trigger element. Accepts upto 2 offset values in px. For example data-kt-menu-offset="0,20"
The first number indicates the horizontal offset value.
The second number indicates the vertical offset value.

Methods

All Bootstrap Menu components are initialized automatically, however the following are Bootstrap Menu's functionality methods for more control.
Name Description
Static Methods
createInstances(DOMString selector) Initializes Bootstrap Menu instances by selector. Default value of selectoris [data-kt-menu="true"]. This method can be used to initialize dynamicly populated Bootstrap Menu instances(e.g: after Ajax request). 
KTMenu.createInstances();
getInstance(DOMElement element) Get the KTMenu instance created 
var menuElement = document.querySelector("#kt_menu");
var menu = KTMenu.getInstance(menuElement);
Public Methods
show(DOMElement item) Shows submenu(accordion or dropdown) of given menu item. 
var item = document.querySelector("#kt_menu_item");
menu.show(item);
hide(DOMElement item) Hides submenu(accordion or dropdown) of given menu item. 
var item = document.querySelector("#kt_menu_item");
menu.hide(item);
reset(DOMElement item) Resets submenu states of given menu item. 
var item = document.querySelector("#kt_menu_item");
menu.reset(item);
update() Updates all submenu states. 
menu.update();
destroy() Removes the component instance from element. 
menu.destroy();
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
User Management App
Calendar App
Chat App
Customers App
Upgrade to Ceres HTML Pro
Download Ceres HTML Free