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 Navigation menu

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.

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