Navigation Components

Headers, navbars, utility bars, and announcement banners with multiple theme and layout options.

Overview

Navigation components provide the primary navigation structure for your site. All navigation is configured in site.json and navigation.json with no code required.

Key Features

Themes: Dark, light, brand-primary, brand-dark, transparent
Styles: Fixed, sticky, static positioning
Utility Bar: Top bar with contact info and CTAs
Announcement Bar: Dismissible promotional banner
Responsive: Mobile burger menu with smooth animations
Logo Options: Image or icon+text, with light/dark variants

Basic Navigation Configuration

Configure your site navigation in site.json with these settings

{
  "header": {
    "style": "sticky",
    "theme": "dark",
    "utilityBar": {
      "enabled": true,
      "bgClass": "bg-dark",
      "leftItems": [
        {
          "type": "phone",
          "icon": "fa-phone",
          "text": "020 1234 5678",
          "url": "tel:02012345678"
        }
      ],
      "rightItems": [
        {
          "type": "button",
          "text": "Get Started",
          "url": "/contact",
          "style": "secondary"
        }
      ]
    }
  }
}

<div class="header-wrapper header-sticky has-utility-bar">
  <div class="utility-bar-wrapper">
    <div class="utility-bar bg-dark text-light">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div class="utility-left">
            <a href="tel:02012345678" class="utility-link">
              <i class="fa-solid fa-phone me-1"></i>
              020 1234 5678
            </a>
          </div>
          <div class="utility-right">
            <a href="/contact" class="btn btn-sm btn-secondary">
              Get Started
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="/">
        <i class="fa-solid fa-code fa-lg me-2"></i>
        PageJSON
      </a>
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/components">Components</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/docs">Documentation</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Light Theme Navigation

Clean white navbar with dark text

{
  "header": {
    "theme": "light",
    "style": "sticky"
  }
}

<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
  <div class="container">
    <a class="navbar-brand" href="/">
      <i class="fa-solid fa-code fa-lg me-2"></i>
      PageJSON
    </a>
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navigation with Dropdown Menu

Add dropdown menus by defining children in navigation.json

{
  "main": [
    {
      "label": "Home",
      "url": "/"
    },
    {
      "label": "Components",
      "url": "/components",
      "children": [
        {
          "label": "Heroes",
          "url": "/components/heroes"
        },
        {
          "label": "Content Blocks",
          "url": "/components/content-blocks"
        },
        {
          "label": "Feature Grids",
          "url": "/components/feature-grids"
        }
      ]
    },
    {
      "label": "Documentation",
      "url": "/docs"
    }
  ]
}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" 
           role="button" 
           data-bs-toggle="dropdown">
          Components
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="/components/heroes">Heroes</a></li>
          <li><a class="dropdown-item" href="/components/content-blocks">Content Blocks</a></li>
          <li><a class="dropdown-item" href="/components/feature-grids">Feature Grids</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/docs">Documentation</a>
      </li>
    </ul>
  </div>
</nav>

Announcement Bar

Add a dismissible promotional banner above the main navigation

🎉 New feature launched! Check out our latest updates Learn More →

{
  "header": {
    "announcement": {
      "enabled": true,
      "text": "🎉 New feature launched! Check out our latest updates",
      "link": "/blog/new-feature",
      "linkText": "Learn More",
      "bgClass": "bg-success",
      "textClass": "text-white",
      "dismissible": true
    }
  }
}

<div class="announcement-bar bg-success text-white">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center py-2">
      <div class="announcement-content">
        <span>🎉 New feature launched! Check out our latest updates</span>
        <a href="/blog/new-feature" class="text-white ms-2" style="text-decoration: underline;">
          Learn More →
        </a>
      </div>
      <button class="btn-close btn-close-white" 
              aria-label="Close"
              onclick="this.closest('.announcement-bar').remove()">
      </button>
    </div>
  </div>
</div>

Icon + Text Logo

Use Font Awesome icons with your site name - scalable and no images needed

Large (navbar brand):

With different icons:

StartupCo BuildIt FastApp

{
  "branding": {
    "logoType": "icon",
    "logoIcon": "fa-code",
    "logoText": "PageJSON"
  }
}

<a class="navbar-brand" href="/">
  <i class="fa-solid fa-code fa-lg me-2"></i>
  PageJSON
</a>

Image Logo

Use custom logo images with automatic light/dark variants

Dark navbar (light logo):

Light navbar (dark logo):

{
  "branding": {
    "logoType": "image",
    "logo": "/assets/img/logo/logo-dark.svg",
    "logoLight": "/assets/img/logo/logo-light.svg"
  }
}

<!-- Dark navbar uses logoLight -->
<a class="navbar-brand" href="/">
  <img src="/assets/img/logo/logo-light.svg" 
       alt="PageJSON" 
       style="height: 40px;">
</a>

<!-- Light navbar uses logo (dark) -->
<a class="navbar-brand" href="/">
  <img src="/assets/img/logo/logo-dark.svg" 
       alt="PageJSON" 
       style="height: 40px;">
</a>

Smart Features

Auto-Hide Utility Bar

When enabled, the utility bar automatically hides on scroll down and reappears on scroll up, saving vertical space while keeping the main navbar visible.

Mobile Responsive

All navigation automatically adapts to mobile with a burger menu. Dropdown menus convert to accordion-style navigation on small screens.

Dropdown Menus

Add children array to any navigation item to create dropdown menus. Supports unlimited nesting levels.

Active State

Current page is automatically highlighted in the navigation based on URL matching.