<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>
button
, an
input
field or an empty
div
.data-kt-menu-trigger
to the trigger element with a value of
click
or
hover
initialize the menu trigger type..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..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.
<!--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-->
<!--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-->
Name | Type | Description |
---|---|---|
data-kt-menu-trigger
|
mandatory
|
Sets the trigger method. Accepts values
click or
hover
This is also compatible with Bootstrap's standard breakpoint sizing (eg:
For example:
sm, md, lg, xl ) with similar
px or
% values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.{default:'click', 'lg': 'hover'} indicates that the drawer view component has
bottom position value width on screens larger than
lg and
top for 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-start and
right-end
This is also compatible with Bootstrap's standard breakpoint sizing (eg:
For example:
sm, md, lg, xl ) with similar
px or
% values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.{default:'top', 'g': 'bottom'} indicates that the drawer view component has
bottom position value width on screens larger than
lg and
top for 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. |
Name | Description |
---|---|
Static Methods | |
createInstances(DOMString selector)
|
Initializes Bootstrap Menu instances by selector. Default value of
selector is
[data-kt-menu="true"] . This method can be used to initialize dynamicly populated Bootstrap Menu instances(e.g: after Ajax request).
|
getInstance(DOMElement element)
|
Get the KTMenu instance created
|
Public Methods | |
show(DOMElement item)
|
Shows submenu(accordion or dropdown) of given menu item.
|
hide(DOMElement item)
|
Hides submenu(accordion or dropdown) of given menu item.
|
reset(DOMElement item)
|
Resets submenu states of given menu item.
|
update()
|
Updates all submenu states.
|
destroy()
|
Removes the component instance from element.
|