DocumentationNext.js and Firebase

Updating the navigation menu of your Makerkit SaaS application

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

The navigation menu of your Makerkit SaaS application's landing pages (or marketing side) is defined in the SiteNavigation component defined at src/components/SiteNavigation.tsx.

Adding a new menu entry to the navigation menu

To add a new menu entry, simply add a new entry to the links object.

The key of the object is the name of the menu entry, and the value is an object with the label and path properties.

src/components/SiteNavigation.tsx
const links = {
 SignIn: {
   label: 'Sign In',
   path: '/auth/sign-in',
 },
 Blog: {
   label: 'Blog',
   path: '/blog',
 },
 Docs: {
   label: 'Docs',
   path: '/docs',
 },
 Pricing: {
   label: 'Pricing',
   path: '/pricing',
 },
 FAQ: {
   label: 'FAQ',
   path: '/faq',
 },
 NewPage: {
   label: 'New Page',
   path: '/new-page',
 },
};

Then, add a new NavigationMenuItem component to the NavigationMenu component.

src/components/SiteNavigation.tsx
<NavigationMenu>
 <NavigationMenuItem
   className={'flex lg:hidden'}
   link={links.SignIn}
 />
 <NavigationMenuItem link={links.Blog} />
 <NavigationMenuItem link={links.Docs} />
 <NavigationMenuItem link={links.Pricing} />
 <NavigationMenuItem link={links.FAQ} />
 <NavigationMenuItem link={links.NewPage} />
</NavigationMenu>

Et voilà! Your new menu entry is now available in the navigation menu.