TanStarter Docs

Navbar Menus

Configuring the navigation menu in the website header

Defines the navigation menu links in the website header, each item is 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 navbar conditionally shows links based on feature flags (e.g., payment.enable, blog.enable). It supports both simple links and dropdown menus with nested items. Dropdowns can include icons and descriptions for a richer user experience.

Navbar

Next Steps

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

Last updated on

On this page