> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> How to customize the main navigation header in Sabo.

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.

## How to Customize Navigation Links

Navigation links are managed by constant arrays defined at the top of both `header.tsx` and `mobile-nav.tsx`.

<Warning>
  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`.
</Warning>

<Steps>
  <Step title="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.

    ```tsx src/components/shared/header.tsx theme={null}
    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.",
      },
    ];
    ```
  </Step>

  <Step title="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`:

    ```diff theme={null}
    // ...
    <NavigationMenuItem>
      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
    -    <Link href="/pricing">Pricing</Link>
    +    <Link href="/about-us">About Us</Link>
      </NavigationMenuLink>
    </NavigationMenuItem>
    // ...
    ```

    <Note>
      **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.
    </Note>
  </Step>

  <Step title="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.

    ```tsx src/components/shared/header.tsx theme={null}
    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 Single Links

    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:

    ```diff theme={null}
    <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>
    ```
  </Step>
</Steps>

## 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.

```tsx src/components/shared/header.tsx theme={null}
<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`.