Menu Customization
In our demo, we've utilized various menu structures. To customize your menu, start by selecting the menu structure you prefer for your application.
Vertical Menu
If you prefer using the vertical menu in your system, you can tailor the menus.ts file to suit your requirements.
lib/menus.ts
export function getMenuList(pathname: string, t: any): Group[] {
return [
{
groupLabel: "",
id: "ecommerce",
menus: [
{
id: "ecommerce",
href: "/ecommerce/frontend",
label: t("ecommerce"),
active: pathname.includes("/ecommerce"),
icon: "heroicons-outline:shopping-bag",
submenus: [
{
href: "/ecommerce/frontend",
label: t("userApp"),
active: pathname.includes("/ecommerce/frontend"),
icon: "heroicons-outline:user",
children: [
{
href: "/ecommerce/frontend",
label: t("products"),
active: pathname === "/ecommerce/frontend",
},
{
href: "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
label: t("productDetails"),
active:
pathname ===
"/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
},
{
href: "/ecommerce/frontend/checkout/cart",
label: t("cart"),
active: pathname === "/ecommerce/frontend/checkout/cart",
},
{
href: "/ecommerce/frontend/wishlist",
label: t("wishlist"),
active: pathname === "/ecommerce/frontend/wishlist",
},
],
},
],
},
],
}
];
};Horizontal Menu
If you prefer using the horizontal collapsed menu in your system, you can tailor the menus.ts file to suit your requirements.
lib/menus.ts
export function getHorizontalMenuList(pathname: string, t: any): Group[] {
return [
{
groupLabel: "",
id: "ecommerce",
menus: [
{
id: "ecommerce",
href: "/ecommerce/frontend",
label: t("ecommerce"),
active: pathname.includes("/ecommerce"),
icon: "heroicons-outline:shopping-bag",
submenus: [
{
href: "/ecommerce/frontend",
label: t("userApp"),
active: pathname.includes("/ecommerce/frontend"),
icon: "heroicons-outline:user",
children: [
{
href: "/ecommerce/frontend",
label: t("products"),
active: pathname === "/ecommerce/frontend",
},
{
href: "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
label: t("productDetails"),
active:
pathname ===
"/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
},
{
href: "/ecommerce/frontend/checkout/cart",
label: t("cart"),
active: pathname === "/ecommerce/frontend/checkout/cart",
},
{
href: "/ecommerce/frontend/wishlist",
label: t("wishlist"),
active: pathname === "/ecommerce/frontend/wishlist",
},
],
},
],
},
],
}
];
};