Navbar Menus

Defines the navigation menu links in the website header, each item is NestedMenuItem.

src/config/navbar-config.tsx

export function getNavbarLinks(): NestedMenuItem[] {
  const t = useTranslations('Marketing.navbar');

  return [
    {
      title: t('features.title'),
      href: Routes.Features,
      external: false,
    },
    {
      title: t('pricing.title'),
      href: Routes.Pricing,
      external: false,
    },
    {
      title: t('blocks.title'),
      items: [
        {
          title: t('blocks.items.hero-section.title'),
          icon: <FlameIcon className="size-4 shrink-0" />,
          href: Routes.HeroBlocks,
          external: false,
        },
        // More dropdown items...
      ],
    },
    // More navigation items...
  ];
}

The navbar supports both simple links and dropdown menus with nested items. Dropdowns can include icons and descriptions for a richer user experience.

Navbar