Manage Sidebar Menus

The sidebar menu gets rendered through the JumboNavbar component and it offers a way to generate menus dynamically, even menus can be fetched and generated from a server side api call to support a secure way to provide the menu access.

API to Fetch Menus

To fetch the menus from the server, you can setup an api under the /src/services folder. For example, in our demo, we have created an API endpoint at /src/utilities/constants/menu.items.ts

This endpoint defined in the route.ts will return an array of objects (menu items with nested children). Here is how it will look like:

import { getDictionary } from '@app/[lang]/dictionaries';

export async function getMenus(locale: string) {
  const dictionary = await getDictionary(locale);
  const { sidebar } = dictionary;
  return [
    {
      label: sidebar.menu.home,
      children: [
        {
          path: `/${locale}/dashboards/misc`,
          label: sidebar.menuItem.misc,
          icon: 'misc',
        },
        ...
      ]
    }
    ...
    }
  ]
}

Types of Menu Item

There are three types of menu items:

1. Section Labels

2. Collapsible Menu Items

3. Nav Item

Section Labels

A section label can be used to group multiple collapsible menu items and nav items and can be defined with only two properties as below:

{
    label: "some label",
    children: [
        // array of collapsible or nav items
    ]
}

Collapsible Menu Items

A collapsible menu item can be used to group multiple nav items or other collapsible menu items. The collapsible menu item can have two additional properties associated with it as below:

{
    label: "some label",
    icon: "crypto",
    collapsible: true,
    children: [
        // array of collapsible or nav items
    ]
}

Nav Item

The nav item is the finally clickable item and linked with a route. So, it has additional property called path and can be defined as below:

{
    label: "some label",
    icon: "crypto",
    path: "/path-to-route",
}

Comparing Nav Item with Collapsible Menu Item, the Nav Item doesn't have collapsible and children property but have an additional property path instead.