import { Tabs } from "nextra/components";

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

```ts filename="lib/menus.ts" /children/

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.


```js filename="lib/menus.ts" /children/
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",
                },
              ],
            },
            
          ],
        },
      ],
    }
  ];
};
```