Menu

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)

Vertical

<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);
}

Horizontal

<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'
  });
}

Horizontal (show dropdown on hover)

<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.

Elements

<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);
  });
}

Without Accordion

Open / Close Menu without accordion. One has to manually open / close the menu items.

Vertical menu without accordion (Manually open / close)

<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
  });
}

Without Animation

Open / Close Menu Without Animation. One has to manually open / close the menu items.

Vertical menu without animation

<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

Usage

Menu Initialization Options

Menu Hooks

Basic Menu

Vertical

Horizontal

Horizontal (show dropdown on hover)

Menu Elements

Elements

John Doe

Without Accordion

Vertical menu without accordion (Manually open / close)

Without Animation

Vertical menu without animation

Menu Theme

John Doe

Variables