Skip to main content
The main header component is responsible for site-wide navigation. It features a responsive design that adapts to different screen sizes: a full navigation menu is shown on desktops, while a compact, slide-out menu is used for mobile.

​
File Location

The header component is located at src/components/shared/header.tsx. The mobile navigation logic is in a separate component at src/components/shared/mobile-nav.tsx.

​
Component Structure

The header.tsx component consists of three main parts:
  1. Logo: The site logo, rendered via the <Logo /> component.
  2. Desktop Navigation (<NavigationMenu />): A full menu visible on medium screens and wider (md: breakpoint).
  3. Mobile Navigation (<MobileNav />): A hamburger menu icon that triggers a slide-out panel (<Sheet />) on smaller screens.
Navigation links are managed by constant arrays defined at the top of both header.tsx and mobile-nav.tsx.
The desktop and mobile navigation menus are configured independently. To ensure consistency, you must apply changes to the link arrays in both src/components/shared/header.tsx and src/components/shared/mobile-nav.tsx.
1

Editing Dropdown Menu Items

The “Features” and “Resources” dropdown menus are generated from the features and resources arrays. To add, remove, or edit an item, modify the corresponding object in the array.
src/components/shared/header.tsx
const features: { title: string; href: string; description: string }[] = [
  {
    title: "Authentication",
    href: "/authentication",
    description:
      "Secure user authentication...",
  },
  // Add your new feature here
  {
    title: "New Feature",
    href: "/new-feature",
    description: "A brief description of your amazing new feature.",
  },
];
2

Editing Single Navigation Links

Links like “Pricing” and “Blog” are not generated from an array; they are written directly into the JSX code. To edit one, you must modify the <Link> component.For example, to change the Pricing link to an About Us link, you would edit this section in src/components/shared/header.tsx:
// ...
<NavigationMenuItem>
  <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-    <Link href="/pricing">Pricing</Link>
+    <Link href="/about-us">About Us</Link>
  </NavigationMenuLink>
</NavigationMenuItem>
// ...
Why use two different methods?It’s about dropdowns vs. single links.
  • Array-based: Used for the “Features” and “Resources” dropdown menus, which contain a list of related items.
  • Direct (Hardcoded): Used for top-level, single links like “Pricing” and “Blog” that don’t have a dropdown.
3

Handling External Links

Sabo handles external links differently depending on whether they are in a dropdown menu or are single, top-level links.

​
For Dropdown Menu Items

For items within the “Features” or “Resources” dropdowns, you can add the external: true property to the item’s object in its respective array. This is a convenience feature that automatically adds target="_blank", rel="noopener noreferrer", and an external link icon.This pattern is enabled by default in the resources array, but can be added to the features array if needed.
src/components/shared/header.tsx
const resources: { title: string; href: string; description: string; external?: boolean; }[] = [
  {
    title: "Documentation",
    href: "https://docs.example.com",
    description: "...",
    external: true, // This makes it an external link
  },
];
For top-level links like “Pricing” or “Blog”, which are not in a dropdown, you need to manually change the <Link> component to a standard <a> tag and add the necessary attributes.Here is how you would change the “Blog” link to an external link:
<NavigationMenuItem>
  <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-    <Link href="/blog">Blog</Link>
+    <a
+      href="https://my-external-blog.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Blog
+    </a>
  </NavigationMenuLink>
</NavigationMenuItem>

​
Customizing Action Buttons

The “Sign in” and “Get Started” buttons are located at the end of the desktop navigation section. You can customize their text and links by editing the Button components.
src/components/shared/header.tsx
<div className="hidden md:flex items-center gap-2">
  <Button variant="outline" asChild>
    <Link href="/login">Log in</Link> {/* Changed from Sign in */}
  </Button>
  <Button asChild>
    <Link href="/register">Sign Up Free</Link> {/* Changed from Get Started */}
  </Button>
</div>
Remember to also apply similar changes to the buttons in the footer of mobile-nav.tsx.