Skip to main content
Components

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

A clean light navbar with a text-only brand. Use this as your default header baseline.

{
  "branding": {
    "logoType": "icon",
    "logoIcon": "fa-code",
    "logoText": "PageJSON"
  },
  "header": {
    "style": "sticky",
    "theme": "light"
  }
}
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
  <div class="container">
    <a class="navbar-brand fw-semibold" href="/">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="/components">Components</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs">Documentation</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Utility Bar (Top Header Bar)

Add a compact top bar for contact links and a secondary CTA above the main navbar (shown here with a light theme).

{
  "header": {
    "style": "sticky",
    "theme": "light",
    "utilityBar": {
      "enabled": true,
      "bgClass": "bg-light",
      "textClass": "text-dark",
      "leftItems": [
        {
          "type": "phone",
          "icon": "fa-phone",
          "text": "020 1234 5678",
          "url": "tel:02012345678"
        }
      ],
      "rightItems": [
        {
          "type": "text",
          "text": "Get Started",
          "icon": "fa-arrow-right",
          "url": "/contact"
        }
      ]
    }
  }
}
<div class="header-wrapper header-sticky has-utility-bar">
  <div class="utility-bar-wrapper">
    <div class="utility-bar bg-light border-bottom">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div class="utility-left">
            <a href="tel:02012345678" class="utility-link text-dark">
              <i class="fa-solid fa-phone me-1"></i>
              020 1234 5678
            </a>
          </div>
          <div class="utility-right">
            <a href="/contact" class="text-dark" style="text-decoration: underline;">
              Get Started →
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
    <div class="container">
      <a class="navbar-brand fw-semibold" href="/">PageJSON</a>
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNavUtility">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavUtility">
        <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="/components">Components</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/docs">Documentation</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Dark Theme Navigation

High contrast dark navbar with a simple text brand.

{
  "branding": {
    "logoType": "icon",
    "logoIcon": "fa-code",
    "logoText": "PageJSON"
  },
  "header": {
    "theme": "dark",
    "style": "sticky"
  }
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand fw-semibold" href="/">PageJSON</a>
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarNavDark">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDark">
      <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="/components">Components</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs">Documentation</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navigation with Dropdown Menu

Add dropdown menus by defining `dropdown` in navigation.json

{
  "main": [
    {
      "label": "Home",
      "url": "/"
    },
    {
      "label": "Components",
      "url": "/components",
      "dropdown": [
        {
          "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

One clean icon+text brand. Keep it consistent across themes by using a single accent color for the icon.

Navbar brand:

PageJSON 
{
  "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 a logo image on light navbars. Provide a separate light variant for dark navbars (logoLight).

For dark navbars, provide a light logo variant (e.g. branding.logoLight) so the logo remains readable. 

{
  "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.