Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Menu doesn't seem to support three-level menus


Add the first level menu to the third level menu in the sidebar, and the position of the third level menu from right start will run to the left of the second level menu instead of the right.
Test version: vue_v8.2.7_demo8

Aside.vue



<template>
<!--begin::Aside-->
<div
id="kt_aside"
class="aside"
data-kt-drawer="true"
data-kt-drawer-name="aside"
data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"200px", "300px": "250px"}"
data-kt-drawer-direction="start"
data-kt-drawer-toggle="#kt_aside_mobile_toggle"
>
<!--begin::Aside Toolbarl-->
<div class="aside-toolbar flex-column-auto" id="kt_aside_toolbar">
<!--begin::Aside user-->
<AsideToolbar />
<!--end::Aside user-->
</div>
<!--end::Aside Toolbarl-->

<!--begin::Aside menu-->
<div class="aside-menu flex-column-fluid">
<KTMenu></KTMenu>
</div>
<!--end::Aside menu-->

<!--begin::Footer-->
<div
class="aside-footer flex-column-auto py-5 border-top"
id="kt_aside_footer"
>
<AsideFooter />
</div>
<!--end::Footer-->
</div>
<!--end::Aside-->
</template>

AsideFooter.vue



<!--begin::Menu-->
<div
class="menu menu-column menu-rounded menu-gray-600 menu-state-bg fw-semibold w-100"
data-kt-menu="true"
>
<!--begin::Menu item-->
<div
class="menu-item"
data-kt-menu-trigger="hover"
data-kt-menu-placement="right-start"
data-kt-menu-flip="center, top"
>
<!--begin::Menu link-->
<span class="menu-link py-3">
<span class="menu-icon">
<i class="ki-duotone ki-setting fs-3"
><span class="path1"></span><span class="path2"></span
><span class="path3"></span><span class="path4"></span
></i>
</span>
<span class="menu-title">&egrave;&reg;&frac34;&ccedil;&frac12;&reg;</span>
</span>
<!--end::Menu link-->

<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown p-3 w-200px">
<!--begin::Menu item-->
<div
class="menu-item"
data-kt-menu-trigger="hover"
data-kt-menu-placement="right-start"
data-kt-menu-flip="center, top"
>
<span class="menu-link px-1 py-3">
<span class="menu-icon">
<i class="ki-duotone ki-night-day fs-3"
><span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
<span class="path6"></span>
<span class="path7"></span>
<span class="path8"></span>
<span class="path9"></span>
<span class="path10"></span>
</i>
</span>
<span class="menu-title">&aelig;&middot;&plusmn;&aelig;&micro;&#133;&aelig;&uml;&iexcl;&aring;&frac14;&#143;</span>
</span>
<!--begin::Menu-->
<div
class="menu-sub menu-sub-dropdown fw-semibold py-4 fs-base w-150px"
data-kt-element="theme-mode-menu"
>
<!--begin::Menu item-->
<div class="menu-item px-3 my-0">
<a
href="#"
class="menu-link px-3 py-2"
data-kt-element="mode"
data-kt-value="light"
>
<span class="menu-icon" data-kt-element="icon">
<i class="ki-duotone ki-night-day fs-2"
><span class="path1"></span><span class="path2"></span
><span class="path3"></span><span class="path4"></span
><span class="path5"></span><span class="path6"></span
><span class="path7"></span><span class="path8"></span
><span class="path9"></span><span class="path10"></span
></i>
</span>
<span class="menu-title"> Light </span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item px-3 my-0">
<a
href="#"
class="menu-link px-3 py-2"
data-kt-element="mode"
data-kt-value="dark"
>
<span class="menu-icon" data-kt-element="icon">
<i class="ki-duotone ki-moon fs-2"
><span class="path1"></span><span class="path2"></span
></i>
</span>
<span class="menu-title"> Dark </span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item px-3 my-0">
<a
href="#"
class="menu-link px-3 py-2"
data-kt-element="mode"
data-kt-value="system"
>
<span class="menu-icon" data-kt-element="icon">
<i class="ki-duotone ki-screen fs-2"
><span class="path1"></span><span class="path2"></span
><span class="path3"></span><span class="path4"></span
></i>
</span>
<span class="menu-title"> System </span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon">
<i class="ki-duotone ki-keyboard fs-3"
><span class="path1"></span><span class="path2"></span
></i>
</span>
<span class="menu-title">&aring;&iquest;&laquo;&aelig;&#141;&middot;&eacute;&#148;&reg;&aelig;&#147;&#141;&auml;&frac12;&#156;</span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon">
<i class="ki-duotone ki-question-2 fs-3"
><span class="path1"></span><span class="path2"></span
><span class="path3"></span
></i>
</span>
<span class="menu-title">&aring;&cedil;&cedil;&egrave;&sect;&#129;&eacute;&#151;&reg;&eacute;&cent;&#152;</span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon">
<i class="ki-duotone ki-message-edit fs-3"
><span class="path1"></span><span class="path2"></span
></i>
</span>
<span class="menu-title">&aelig;&#132;&#143;&egrave;&sect;&#129;&aring;&#143;&#141;&eacute;&brvbar;&#136;</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div
class="menu-item"
data-kt-menu-trigger="hover"
data-kt-menu-placement="right-start"
>
<!--begin::Menu link-->
<a href="#%22%20class=%22menu-link%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-icon">
<i class="ki-duotone ki-abstract-28 fs-3"
><span class="path1"></span><span class="path2"></span
><span class="path3"></span><span class="path4"></span
><span class="path5"></span
></i>
</span>
<span class="menu-title">&auml;&cedil;&#154;&aring;&#138;&iexcl;&aring;&#144;&#136;&auml;&frac12;&#156;</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu link-->

<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown p-3 w-200px">
<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->

<!--begin::Menu item-->
<div class="menu-item">
<a href="#%22%20class=%22menu-link%20px-1%20py-3" target="_blank" rel="noopener noreferrer">
<span class="menu-bullet me-0">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Example Link</span>
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->

Text formatting options
Submit

Replies (1)


Hi,

Sorry for the late reply.

The menu component was designed to support three levels. In Metronic future releases, we will have the component menu generated recursively to support menu levels as per configuration.

As for now, you can add more levels by modifying the src/layouts/default-layout/components/sidebar/SidebarMenu.vue.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Text formatting options
Submit