Z

AppHeader

A responsive site header organism with logo, navigation links, CTA button, and mobile menu. Uses Alpine.js for mobile menu toggle functionality.

Basic Header

Zika Alert Logo

With CTA Button

Zika Alert Logo

Custom Logo

Health App

Usage Example

<x-interface-frameworks.app-header
    :navItems="$navItems"
/>

<!-- With CTA button -->
<x-interface-frameworks.app-header
    brandName="My App"
    :navItems="$navItems"
>
    <x-slot:cta>
        <x-building-blocks.button variant="primary">
            Sign Up
        </x-building-blocks.button>
    </x-slot:cta>
</x-interface-frameworks.app-header>

<!-- Custom logo -->
<x-interface-frameworks.app-header :navItems="$navItems">
    <x-slot:logo>
        <a href="/">
            <img src="/logo.svg" alt="Logo" />
        </a>
    </x-slot:logo>
</x-interface-frameworks.app-header>

Props

Prop Type Default Description
logo slot null Custom logo slot (overrides default)
brandName string 'Zika Alert' Brand name shown next to logo
navItems array [] Navigation items array
cta slot null Call-to-action button slot
class string '' Additional CSS classes

Accessibility Features

  • Semantic header element
  • Navigation wrapped in nav with aria-label
  • Active items marked with aria-current="page"
  • Mobile menu toggle has aria-expanded
  • Keyboard navigation support for all interactive elements
  • Focus indicators visible on all clickable elements