Navbar Configuration
Configure the header navigation menu of your website
Defines the navigation menu links in the header of the website. Each item is a 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 navigation bar conditionally displays links based on feature toggles (such as payment.enable and blog.enable). It supports simple links as well as dropdown menus with nested items. Dropdown menus can include icons and descriptions to provide a richer user experience.
Next Steps
Now that you understand the navbar configuration, explore these related topics:
-
Website Configuration - Configure core website settings
-
Footer Configuration - Configure links in the website footer
-
Sidebar Configuration - Configure the dashboard navigation menu
-
Avatar Configuration - Configure the user avatar dropdown menu