Skip to main content
The Header component provides the main site navigation with a logo and responsive menu. It includes active state highlighting and smooth hover effects.

​
Features

  • RobTop Games logo with hover scale effect
  • Responsive navigation menu with mobile toggle
  • Active page highlighting
  • Bootstrap Icons integration
  • Glassmorphism effect on mobile menu

​
Usage

src/layouts/Layout.astro
---
import Header from "../components/Header.astro";
---

<Header />

​
Component Code

The Header component doesn’t accept props and automatically detects the current page:
src/components/Header.astro
---
const { pathname } = Astro.url;

const menuItems = [
  { href: '/', text: 'Home', icon: 'bi bi-house-fill' },
  { href: '/blog', text: 'Blog', icon: 'bi bi-journal-text' },
  { href: '/games', text: 'Games', icon: 'bi bi-controller' },
  { href: '/contact', text: 'Contact', icon: 'bi bi-envelope-at' },
];

const isActive = (href: string) => {
  if (href === '/') {
    return pathname === href;
  }
  return pathname.startsWith(href);
};
---

<header>
  <div class="d-flex justify-content-center align-items-center mt-4 mb-3">
    <a href="/" class="hover-scale transition-all">
      <img
        class="img-fluid d-flex"
        src="https://www.robtopgames.com/Images/underConstruction_001.png"
      />
    </a>
  </div>
  
  <nav class="navbar navbar-expand-lg mb-4">
    <div class="container-fluid">
      <div class="w-100 d-flex justify-content-center d-lg-none">
        <button class="navbar-toggler border-0 fs-4 px-3 py-2" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navbarNav">
          <i class="bi bi-list text-white"></i>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-center custom-mobile-menu" 
           id="navbarNav">
        <ul class="navbar-nav gap-3 text-center py-3">
          {menuItems.map((item) => (
            <li class="nav-item">
              <a
                class={`nav-link text-white d-flex align-items-center justify-content-center gap-2 px-4 py-3 rounded-4 transition-all ${isActive(item.href) ? 'active' : 'hover-bright'}`}
                href={item.href}
                aria-current={isActive(item.href) ? 'page' : null}
              >
                <i class={item.icon}></i>
                {item.text}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </nav>
</header>

​
Active State Logic

The component uses Astro.url.pathname to determine which navigation item should be highlighted:
  • Home page: Exact match (pathname === '/')
  • Other pages: Prefix match (pathname.startsWith(href))
const isActive = (href: string) => {
  if (href === '/') {
    return pathname === href;
  }
  return pathname.startsWith(href);
};
The navigation menu is configured with an array of objects: 
const menuItems = [
  { href: '/', text: 'Home', icon: 'bi bi-house-fill' },
  { href: '/blog', text: 'Blog', icon: 'bi bi-journal-text' },
  { href: '/games', text: 'Games', icon: 'bi bi-controller' },
  { href: '/contact', text: 'Contact', icon: 'bi bi-envelope-at' },
];

​
Styling Features

​
Logo Hover Effect

.hover-scale {
  transform: scale(1);
}

.hover-scale:hover {
  transform: scale(1.02);
}

​
Active Navigation Item

.nav-link.active {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.15);
}

​
Mobile Menu Styling

On mobile devices (< 991px), the collapsed menu has a glassmorphism effect: 
@media (max-width: 991px) {
  .custom-mobile-menu {
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-top: 1rem;
  }
}

​
Customization

To add or modify menu items, edit the menuItems array:
src/components/Header.astro
const menuItems = [
  { href: '/', text: 'Home', icon: 'bi bi-house-fill' },
  { href: '/blog', text: 'Blog', icon: 'bi bi-journal-text' },
  { href: '/games', text: 'Games', icon: 'bi bi-controller' },
  { href: '/contact', text: 'Contact', icon: 'bi bi-envelope-at' },
  // Add new menu item
  { href: '/about', text: 'About', icon: 'bi bi-info-circle' },
];
  • Footer - Site footer component
  • SEO - Meta tags and SEO

Build docs developers (and LLMs) love

Get started for freeTalk to us