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

# Header

> Navigation bar with logo, links, and login button

<img src="https://mintcdn.com/shipfastso/-9P87iaUtQEkQp6B/images/header-preview.png?fit=max&auto=format&n=-9P87iaUtQEkQp6B&q=85&s=790c00e34c65b20c05452e00f7a48ff7" alt="Header component preview" className="rounded-lg border mb-6" title="" width="2620" height="175" data-path="images/header-preview.png" />

## Change Navigation Links

Open `/components/Header.tsx` and edit the menu:

```tsx theme={null}
const DEFAULT_MENU: MenuItem[] = [
  { title: "Features", url: "/#features" },
  { title: "Pricing", url: "/#pricing" },
  { title: "Blog", url: "/blog" },
]
```

Add or remove items as needed.

***

## Add Dropdown Menu

```tsx theme={null}
const DEFAULT_MENU: MenuItem[] = [
  {
    title: "Resources",
    url: "/#resources",
    items: [
      {
        title: "Documentation",
        description: "Learn how to use the product",
        icon: <Book className="size-5" />,
        url: "/docs",
      },
      {
        title: "Blog",
        description: "Latest updates and guides",
        icon: <FileText className="size-5" />,
        url: "/blog",
      },
    ],
  },
]
```

***

## Change Logo & Brand

Logo and brand name come from `/config.ts`:

```tsx /config.ts theme={null}
export const config = {
  name: "YourApp",
  logoUrl: "/logo.svg",
  // ...
}
```

Replace `/public/logo.svg` with your logo.

***

<Tip>
  Keep 3-5 links max. Too many options = decision paralysis.
</Tip>

<Tip>
  Always include a "Pricing" link. People look for it first.
</Tip>