导航菜单
配置网站头部的导航菜单
定义网站头部的导航菜单链接,每个项目都是 NestedMenuItem。
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,
},
// 更多下拉项...
],
},
// 更多导航项...
];
}
导航栏支持简单链接和带有嵌套项的下拉菜单。下拉菜单可以包含图标和描述,以提供更丰富的用户体验。
您可以根据需要删除或添加更多项目到导航栏。
常见问题
如何改变导航栏的菜单布局?
导航栏的菜单布局定义在 src/components/shared/navbar.tsx
文件中,使用的是 Shadcn UI 中的 NavigationMenu 组件。
如图所示,如果您想将菜单布局更改为垂直菜单,可以参考 Shadcn UI 文档中的代码。
视频教程
下一步
现在您了解了导航栏配置,请探索其他相关主题: