Navbar Component — Astro

Responsive, accessible navigation bar with integrated settings button

Navbar Component

A responsive, accessible navigation bar with integrated settings button.

Usage

Live Example

The navbar is already included in the Layout component at the top of this page. It includes:

  • Desktop: Docs dropdown (Introduction, Foundations); Components dropdown with 2-column layout and vertical divider
  • Mobile: Menu toggle on left; search and settings icon-only (same size as menu toggle) on right
  • Responsive mobile menu with hamburger toggle (activates at 1024px and below)
  • Smooth hamburger-to-X animation
  • Active link indicator with underline matching hover effect
  • Dropdown menus: Docs (Getting Started, Design System, Theming, Accessibility, Colors) and Components (Overview + all component links). Theming is under Docs; no separate Themes item in the nav.
  • Dropdown arrow rotates on hover
  • Smart dropdown alignment (prevents viewport overflow)
  • Full keyboard navigation for dropdowns (Arrow keys, Enter, Space, Escape, Home, End)
  • Keyboard accessible with full ARIA support
  • Settings button (gear icon) that opens Settings panel
  • Sticky positioning at top
  • Full width layout with no gaps
  • Theme flash prevention (inline script in Layout)
  • All styles use design system CSS variables for framework portability

Code Example

astro astro 
---
import Navbar from '../../components/Navbar.astro';
---

<Navbar siteName="My Site" />

Props

  • siteName (string, optional) - Site name displayed in navbar brand
  • logo (string, optional) - Path to logo image

Features

  • Desktop Layout:
    • Search and settings buttons on far right
    • 2-column dropdown layout - The Components dropdown displays in a 2-column grid with vertical divider. Docs dropdown shows Introduction and Foundations only (Theming is under Docs).
    • Smart dropdown positioning - Automatically adjusts to prevent viewport overflow
    • Dropdown arrow rotates on hover/expand
  • Mobile Layout:
    • Mobile menu toggle positioned on the left (after logo/brand)
    • Search and settings on the right: icon-only, same size as menu toggle (compact bar, no overflow)
    • Responsive mobile menu (activates at 1024px and below) with full-width layout; when open, fixed positioning so it stacks above site content
    • Increased vertical spacing for better readability, especially in dropdown menus
    • Mobile menu links start from left edge with minimal padding
    • Mutually exclusive with search (only one open at a time on mobile)
    • Dropdown toggles use buttons (not links) for accessibility
  • Full-width border (100% width; avoids horizontal overflow on mobile)
  • Responsive mobile menu with smooth open/close transitions
  • Dropdown menus with full keyboard navigation (Arrow keys, Enter, Space, Escape, Home, End)
  • Active link indicator with underline
  • Sticky positioning at top
  • All styles use design system variables for easy framework portability

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above; add minimal JS for mobile menu and dropdowns.