LogoDocumentos de MkSaaS
LogoDocumentos de MkSaaS
Página de inicioIntroductionCodebaseVideo TutorialsGetting StartedEnvironment Setup
Configuration
Website ConfigurationNavbar MenusFooter MenusSidebar MenusAvatar ButtonSocial MediaPrice PlansCredit packages

Integrations

DatabaseAuthenticationEmailNewsletterStorage
Payment
CreditsCron JobsAIAnalyticsNotificationCaptchaChatboxAffiliates

Customization

MetadataFontsThemesImagesi18nBlogDocsComponentsCustom PagesLanding PageUser ManagementAPI Key Management

Codebase

IDE SetupProject StructureFormatting & LintingUpdating the Codebase
X (Twitter)
Configuration

Navbar Menus

Configuring the navigation menu in the website header

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

FAQ

How to change the menu layout of the navbar?

The navbar menu layout is defined in the src/components/shared/navbar.tsx file, using NavigationMenu component from Shadcn UI.

If you want to change the menu layout to a vertical menu, you can refer to the code in Shadcn UI documentation.

NavigationMenu

Video Tutorial

Next Steps

Now that you understand the navbar configuration, explore these related topics:

Website Configuration

Configure core settings for your MkSaaS website

Footer Configuration

Configure the links in the website footer

Sidebar Configuration

Configure the navigation menu for dashboard

Avatar Configuration

Configure the user avatar dropdown menu

Website Configuration

Core settings for your MkSaaS website

Footer Menus

Configuring the links in the website footer

Tabla de contenidos

FAQ
How to change the menu layout of the navbar?
Video Tutorial
Next Steps