ShipTanStarter Docs

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