Easily Navigate through the app using Menu. Here, you will find documentation for different types of menu, initialization options, collapsed, accordion, animation and color options one can use to meet requirements of his app.
In order to use Menu on your page, It is required to include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/js/menu.js"><script>
Following are the available menu initialization options with data types, default values and description.
Option | Datatype | Default Value | Description |
---|---|---|---|
orientation
|
string | "" | The orientation of the menu. Possible values: "horizontal". Default menu orientation will be vertical. |
animate
|
boolean | true | Whether or not the menu should be animated. |
accordion
|
boolean | true | Whether or not the menu should be accordion. |
showDropdownOnHover
|
boolean | true | Whether or not the menu dropdown should open on mouse hover. This option only works for
Horizontal menu.
|
closeChildren
|
boolean | true | Whether or not the submenu items close when the parent menu item close. |
Following are the events to hook in your functionality before / after menu open / close events.
Hook | Description |
---|---|
onOpen
|
Event is executed Before the menu opens. |
onOpened
|
Event is executed After the menu opens. |
onClose
|
Event is executed Before the menu close. |
onClosed
|
Event is executed After the menu close. |
Following are some examples of basic menu like vertical, horizontal (on click), horizontal menu (on hover)
<div class="menu menu-vertical bg-menu-theme py-4 overflow-hidden" id="menu-1" style="height: 450px">
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menu1 = document.querySelector('#menu-1');
if (menu1) {
new Menu(menu1);
}
<div class="menu menu-horizontal bg-menu-theme" id="menu-2" style="position: relative;z-index: 100">
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menu2 = document.querySelector('#menu-2');
if (menu2) {
new Menu(menu2, {
orientation: 'horizontal'
});
}
<div class="menu menu-horizontal bg-menu-theme" id="menu-3" style="position: relative;z-index: 99">
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menu3 = document.querySelector('#menu-3');
if (menu3) {
new Menu(menu3, {
orientation: 'horizontal',
showDropdownOnHover: true
});
}
Add elements to your menu like user details or footer actions like in below example.
<div class="menus-9 menu menu-vertical d-inline-flex bg-menu-theme me-6" style="height: 500px">
<div class="menu-block my-2 d-flex align-items-center">
<div class="avatar avatar-lg avatar-online me-2"><img alt="Avatar" class="rounded-circle shadow" src="assets/img/avatars/7.png"></div>
<h5 class="menu-text mt-4 mb-1">John Doe</h5>
<div class="small">
<a class="menu-link" href="javascript:void(0)">ABC Company, CEO</a>
</div>
</div>
<div class="menu-divider mt-0"></div>
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
<div class="menu-divider mb-0"></div>
<ul class="m-0 p-0">
<li class="menu-block my-1 d-flex flex-row justify-content-between">
<a class="fold-show"title="Settings" data-bs-placement="top" data-bs-toggle="tooltip" href="javascript:%20void(0);"><span aria-hidden="true" class="text-body ri-settings-3-line"></span></a> <atitle="Lock" data-bs-placement="top" data-bs-toggle="tooltip" href="javascript:%20void(0);"><span aria-hidden="true" class="text-body ri-eye-off-line"></span></a> <atitle="Logout" data-bs-placement="top" data-bs-toggle="tooltip" href="javascript:%20void(0);"><span aria-hidden="true" class="text-body ri-shut-down-line"></span></a>
</li>
</ul>
</div>
const menus9List = document.querySelectorAll('.menus-9');
if (menus9List) {
menus9List.forEach(e => {
new Menu(e);
});
}
Open / Close Menu without accordion. One has to manually open / close the menu items.
<div class="menu menu-vertical bg-menu-theme mb-6" id="menu-7" style="height: 450px">
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menu7 = document.querySelector('#menu-7');
if (menu7) {
new Menu(menu7, {
accordion: false
});
}
Open / Close Menu Without Animation. One has to manually open / close the menu items.
<div class="menu menu-vertical bg-menu-theme mb-6" id="menu-5" style="height: 450px">
<ul class="menu-inner">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menu5 = document.querySelector('#menu-5');
if (menu5) {
new Menu(menu5, {
animate: false
});
}
Here's an example of basic menu theme .bg-menu-theme
that has theme menu bg
color.
<div class="menus-12 menu menu-vertical d-inline-flex bg-menu-theme me-6 mb-6" style="height: 650px">
<ul class="menu-inner">
<li class="menu-item">
<div class="menu-block my-2 d-flex align-items-center">
<div class="avatar avatar-lg avatar-online me-2">
<img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle shadow">
</div>
<h5 class="menu-text mt-4 mb-1">John Doe</h5>
<div class="small">
<a href="javascript:void(0)" class="menu-link">
ABC Company, CEO</a>
</div>
</div>
</li>
<li class="menu-divider mt-0"></li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-user-line"></i>
<div>Lorem Ipsum Long Long Long Text materialdesign</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon menu-icon ri-home-smile-line"></i>
<div>Dashboards</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 1</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 2</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Dashboard 3</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon ri-file-3-line"></i>
<div>Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Account Settings</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>View</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Edit</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div>Authentication</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Login</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Register</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div>Forgot Password</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-divider mb-0"></li>
<li class="menu-header small fw-medium">Apps</li>
<li class="menu-item active">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-mail-line"></i>
<div>Email</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-chat-4-line"></i>
<div>Chat</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-check-line"></i>
<div>Todo</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-calendar-line"></i>
<div>Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-drag-drop-line"></i>
<div>Kanban</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<i class="menu-icon ri-file-text-line"></i>
<div>Invoice</div>
</a>
</li>
</ul>
</div>
const menus12List = document.querySelectorAll('.menus-12');
if (menus12List) {
menus12List.forEach(e => {
new Menu(e);
});
}
Here is the theme menu bg color mixin which allow you to easily customize menu style by adding your own class and colors.
@mixin template-menu-style($parent, $bg, $color: null, $active-color: null, $border: null, $active-bg: null)
@include template-menu-style('.bg-menu-theme', #fff, $color: #99a3b5, $active-color: $body-color, $active-bg: #f0f1f3);
Refer the table given below for all the variables of Menu
Variable | Description |
---|---|
$menu-width
|
Variable for menu width |
$menu-font-size
|
Variable for menu font size |
$menu-collapsed-width
|
Variable for collapsed menu width |
$menu-item-spacer
|
Variable for menu item spacer |
$menu-vertical-link-padding-y
|
Variable for vertical menu item top & bottom padding |
$menu-vertical-link-padding-x
|
Variable for vertical menu item left & right padding |
$menu-vertical-menu-link-padding-y
|
Variable for vertical menu link top & bottom padding |
$menu-vertical-menu-level-spacer
|
Variable for vertical menu level spacer |
$menu-horizontal-link-padding-y
|
Variable for horizontal menu item top & bottom padding |
$menu-horizontal-link-padding-x
|
Variable for horizontal menu item left & right padding |
$menu-horizontal-menu-link-padding-y
|
Variable for horizontal menu link top & bottom padding |
$menu-horizontal-menu-level-spacer
|
Variable for horizontal menu level spacer |
$menu-sub-width
|
Variable for submenu width |
$menu-control-width
|
Variable for control width |
$menu-control-arrow-size
|
Variable for menu arrow size |
$menu-icon-expanded-width
|
Variable for expanded menu width |
$menu-icon-expanded-font-size
|
Variable for expanded menu font size |
$menu-icon-expanded-spacer
|
Variable for expanded menu spacer |
$menu-animation-duration
|
Variable for menu animation duration |
$menu-max-levels
|
Variable for menu max levels |
$menu-dark-border-color
|
Variable for light menu border color |
$menu-dark-menu-bg
|
Variable for dark menu bg color |
$menu-light-border-color
|
Variable for light menu border color |
$menu-light-menu-bg
|
Variable for light menu bg color |