LogoShipSaaS
Configuration

Navbar Configuration

Configure the header navigation menu of your website

Defines the navigation menu links in the header of the website. Each item is a MenuItemConfig.

src/config/navbar-config.ts

export function getNavbarLinks(): MenuItemConfig[] {
  const links: MenuItemConfig[] = [
    { title: m.features, href: Routes.Features, external: false },
  ];
  if (websiteConfig.payment?.enable) {
    links.push({ title: m.pricing, href: Routes.Pricing, external: false });
  }
  if (websiteConfig.blog?.enable) {
    links.push({ title: m.blog, href: Routes.Blog, external: false });
  }
  links.push({
    title: m.pages,
    items: [
      {
        title: m.about.title,
        description: m.about.description,
        href: Routes.About,
        icon: IconBuilding,
        external: false,
      },
      // More dropdown items...
    ],
  });
  return links;
}

The navigation bar conditionally displays links based on feature toggles (such as payment.enable and blog.enable). It supports simple links as well as dropdown menus with nested items. Dropdown menus can include icons and descriptions to provide a richer user experience.

Next Steps

Now that you understand the navbar configuration, explore these related topics:

On this page