# Set Up Header and Navbar

Add action buttons and navigation links to your documentation site's header to guide users to key actions and resources.

Set up your documentation site's header with action buttons and navigation links. The Documentation.AI platform displays your navbar at the top of every page, providing users with easy access to key actions and external resources.

## Prerequisites

- Access to your `documentation.json` file
- List of key actions you want users to take (signup, login, contact, etc.)
- URLs for external resources or contact methods
- Understanding of your user journey and primary conversion goals

## Set Up Your Header Navigation

Follow these steps to add action buttons and links to your site header.

### Step 1: Plan your header strategy

Determine what actions you want users to take:

- Primary action: Main conversion goal (signup, trial, demo)
- Secondary actions: Supporting links (login, support, external resources)
- Contact methods: Email, phone, or chat support

### Step 2: Add navbar configuration

Open your `documentation.json` file and add the navbar section:

```
{
  "navbar": {
    "actions": {
      "primary": {
        "title": "Get Started",
        "link": "https://dashboard.example.com/signup"
      },
      "links": [
        {
          "title": "Login",
          "link": "https://dashboard.example.com/login"
        }
      ]
    }
  }
}
```

### Step 3: Configure primary action button

Set up your main call-to-action button:

1. Choose action-oriented text ("Get Started", "Try Free", "Sign Up")
2. Link to your primary conversion URL
3. Ensure the URL works and loads quickly

```
{
  "primary": {
    "title": "Get Started",
    "link": "https://dashboard.example.com/signup"
  }
}
```

### Step 4: Add secondary navigation links

Include additional helpful links:

```
{
  "links": [
    {
      "title": "Login",
      "link": "https://dashboard.example.com/login"
    },
    {
      "title": "Support",
      "link": "mailto:support@example.com"
    }
  ]
}
```

### Step 5: Add contact links

Include direct contact options using special protocols:

```
{
  "links": [
    {
      "title": "Email Support",
      "link": "mailto:support@example.com"
    },
    {
      "title": "Call Sales",
      "link": "tel:+1-555-0123"
    }
  ]
}
```

**Supported link types:**

- **Web URLs**: `https://example.com`
- **Email**: `mailto:support@example.com`
- **Phone**: `tel:+1-555-0123`

### Step 6: Test your header setup

1. Save your `documentation.json` file
2. Deploy or preview your changes
3. Verify all links work correctly
4. Test on different screen sizes (mobile, tablet, desktop)
5. Check that contact links open appropriate applications

## Optimize Your Header

### Choose effective button text

- Use action verbs: "Get Started", "Try Free", "Sign Up"
- Keep text short (1-3 words)
- Match your brand voice and user expectations

### Prioritize link order

- Place most important links first
- Limit secondary links to 3-4 items
- Consider user workflow and priority

### Test across devices

- Ensure header works on mobile devices
- Verify touch targets are appropriately sized
- Check that text remains readable at all sizes

## Complete Header Example

```
{
  "navbar": {
    "actions": {
      "primary": {
        "title": "Start Free Trial",
        "link": "https://app.example.com/signup"
      },
      "links": [
        {
          "title": "Sign In",
          "link": "https://app.example.com/login"
        },
        {
          "title": "Pricing",
          "link": "https://example.com/pricing"
        },
        {
          "title": "Get Help",
          "link": "mailto:support@example.com"
        }
      ]
    }
  }
}
```

## Troubleshooting Header Issues

**Button not appearing**: Verify JSON syntax and proper nesting under `navbar.actions`

**Links not working**: Check URLs are complete and accessible

**Mobile display issues**: Test responsive behavior on different screen sizes

**Contact links not opening**: Ensure proper `mailto:` or `tel:` protocol format

## What's Next

- [Set up your site branding and logos](/content/docs/customize/branding/index.html)
- [Configure navigation structure](/content/docs/customize/navigation-and-sidebar/index.html)
- [Customize colors and typography](/content/docs/customize/colors-and-typography/index.html)
- [See complete site configuration reference](/content/docs/customize/site-configuration/index.html)

Header configuration is completely optional. You can include just a primary button, just secondary links, or both. The platform automatically handles responsive design and optimal placement across all device sizes.