Updating the sidebar menu of your Makerkit SaaS application
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 thehref
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.