This documentation is for a legacy version of Next.js Supabase. For the latest version, please visit the Next.js Supabase Turbo documentation

Updating the Sidebar menu

Learn how to update the sidebar menu of your Makerkit landing pages

The Sidebar of your Makerkit SaaS application is defined in the src/navigation.config.tsx configuration file.

This allows you to easily add, remove, or update the menu entries of your application and automatically generate a responsive sidebar menu for your users.

Adding a new menu entry to the Sidebar

To add a new menu entry to the sidebar, simply add a new entry to the NAVIGATION_CONFIG.items array in the src/navigation.config.tsx file.

A menu entry is defined by the following properties:

{
  label: string;
  path: string;
  Icon: (props: { className: string }) => JSX.Element;
}
  • label: The label of the menu entry. This label will be displayed in the sidebar of your application. This can be either a reference to a translation key or a string.
  • path: The path of the menu entry. This path will be used to generate the href attribute of the menu entry.
  • Icon: The icon of the menu entry. This icon will be displayed in the sidebar of your application.

Consider the default schema below:

import configuration from '~/configuration';
 
import {
  Cog8ToothIcon,
  Square3Stack3DIcon,
  Squares2X2Icon,
} from '@heroicons/react/24/outline';
 
const NAVIGATION_CONFIG = (organization: string) => ({
  items: [
    {
      label: 'common:dashboardTabLabel',
      path: getPath(organization, configuration.paths.appHome),
      Icon: ({ className }: { className: string }) => {
        return <Squares2X2Icon className={className} />;
      },
    },
    {
      label: 'common:tasksTabLabel',
      path: getPath(organization, 'tasks'),
      Icon: ({ className }: { className: string }) => {
        return <Square3Stack3DIcon className={className} />;
      },
    },
    {
      label: 'common:settingsTabLabel',
      path: getPath(organization, 'settings'),
      Icon: ({ className }: { className: string }) => {
        return <Cog8ToothIcon className={className} />;
      },
    },
  ],
});
 
function getPath(organizationId: string, path: string) {
  const appPrefix = configuration.paths.appPrefix;
 
  return [appPrefix, organizationId, path].filter(Boolean).join('/');
}
 
export default NAVIGATION_CONFIG;

Now, let's add a new menu entry to the sidebar:

import configuration from '~/configuration';
 
import {
  Cog8ToothIcon,
  Square3Stack3DIcon,
  Squares2X2Icon,
} from '@heroicons/react/24/outline';
 
const NAVIGATION_CONFIG = {
  items: [
    {
      label: 'common:dashboardTabLabel',
      path: configuration.paths.appHome,
      Icon: ({ className }: { className: string }) => {
        return <Squares2X2Icon className={className} />;
      },
    },
    {
      label: 'common:tasksTabLabel',
      path: '/tasks',
      Icon: ({ className }: { className: string }) => {
        return <Square3Stack3DIcon className={className} />;
      },
    },
    {
      label: 'common:settingsTabLabel',
      path: '/settings',
      Icon: ({ className }: { className: string }) => {
        return <Cog8ToothIcon className={className} />;
      },
    },
    {
      label: 'common:myNewTabLabel',
      path: '/my-new-tab',
      Icon: ({ className }: { className: string }) => {
        return <Cog8ToothIcon className={className} />;
      },
    },
  ],
};

As you can see, we added a new menu entry to the NAVIGATION_CONFIG.items array. The change will be automatically reflected in the sidebar of your application.

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS