LogoMkSaaS文档

导航菜单

配置网站头部的导航菜单

定义网站头部的导航菜单链接,每个项目都是 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,
        },
        // 更多下拉项...
      ],
    },
    // 更多导航项...
  ];
}

导航栏支持简单链接和带有嵌套项的下拉菜单。下拉菜单可以包含图标和描述,以提供更丰富的用户体验。

您可以根据需要删除或添加更多项目到导航栏。

Navbar

常见问题

如何改变导航栏的菜单布局?

导航栏的菜单布局定义在 src/components/shared/navbar.tsx 文件中,使用的是 Shadcn UI 中的 NavigationMenu 组件。

如图所示,如果您想将菜单布局更改为垂直菜单,可以参考 Shadcn UI 文档中的代码。

NavigationMenu

视频教程

下一步

现在您了解了导航栏配置,请探索其他相关主题: