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
• Configure navigation structure
• Customize colors and typography
• See complete site configuration reference

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.