Narrative Section

Navigation Patterns

Accessible navigation components with mobile menu, dropdown menus, and sticky behavior. Features trauma-informed UX principles with soft colors, generous spacing, and smooth transitions. WCAG 2.2 Level AA compliant.

Wide Desktop Navigation

Prominent vertical logo layout with three-column structure: Logo | Navigation Links | CTA Button. Creates strong brand presence with generous spacing (py-6) and large logo (h-40 on desktop, h-20 on mobile).

Wide Layout Guidelines

Logo Size: h-40 (160px) on desktop, h-20 (80px) on mobile for strong brand presence
Spacing: py-6 on desktop, py-4 on mobile for generous breathing room
Three Columns: Logo (left) | Nav Links (center) | CTA + Mobile Menu (right)
Use Case: Homepage, landing pages, branded sections where vertical space is available

Compact Desktop Navigation

Standard horizontal navigation with inline logo and links. Space-efficient layout suitable for internal pages and admin sections.

Mobile Navigation

Touch-optimized mobile menu with slide-in animation, nested services dropdown, and full-width CTA button.

Sticky Navigation

Fixed navigation with glassmorphism effect (backdrop-blur-sm) that stays visible during scroll. Smaller logo size (h-12) for space efficiency.

Scroll down to see sticky navigation behavior (simulated)...

In production, the navigation will stay fixed at the top with a glassmorphism effect as you scroll down the page.

Content area... The navigation above remains fixed when scrolling.

Accessibility & Implementation

ARIA Attributes

aria-label="Main navigation" on nav element
aria-expanded for dropdown and mobile menu buttons
aria-controls linking button to menu ID
aria-current="page" for active navigation links
aria-hidden="true" on decorative icons

Keyboard Navigation

Tab: Navigate through links and buttons
Enter/Space: Activate buttons and links
Esc: Close dropdown menus and mobile menu
Arrow keys: Navigate within dropdown menus

Focus Management

Focus trap in mobile menu when open
Return focus to trigger button when menu closes
Visible focus indicators: focus:ring-2 focus:ring-pepper-green-500
Touch target size: Minimum 44x44px (WCAG 2.2)

Trauma-Informed UX

Soft Colors: pepper-green-500 (calming green, not harsh red)
Generous Spacing: py-6 on desktop, py-4 on mobile
Smooth Transitions: duration-200 for all hover/focus states
Rounded Corners: rounded-lg for soft, welcoming appearance
Gentle Feedback: hover:bg-pepper-green-50 (very subtle)

Alpine.js Pattern

<nav x-data="{ mobileOpen: false, servicesOpen: false }">
    <button @click="mobileOpen = !mobileOpen">
        Menu
    </button>

    <div x-show="mobileOpen"
         x-transition:enter="duration-300">
        <!-- Mobile menu content -->
    </div>
</nav>

Laravel Integration


<x-fds.header variant="wide" />


<x-fds.header
    variant="compact"
    sticky="true"
/>

Narrative Section

Footer Navigation Patterns

Comprehensive footer layouts with newsletter subscription, social links, and trauma-informed gradient backgrounds. WCAG 2.2 Level AA compliant with generous spacing and soft color transitions.

Standard Footer

Full-featured footer with brand identity, navigation columns, newsletter subscription, social links, and legal pages. Ideal for main public pages.

Standard Footer Guidelines

Gradient Background: from-white-smoke-50 via-apocalyptic-orange-50 to-pot-of-gold-100
Generous Spacing: py-12 md:py-16 for breathing room
4-Column Grid: Brand + 3 navigation columns + Newsletter (responsive)
Newsletter Form: Uses FDS input component with secondary button
Social Icons: LinkedIn, Instagram, GitHub with aria-labels
Use Case: Main public pages (home, about, portfolio, blog)

Minimal Footer

Compact footer layout with brand, quick links, and social icons. Ideal for internal pages or minimal designs.

Minimal Footer Guidelines

Compact Layout: 2-column grid on desktop, stacked on mobile
Smaller Logo: 64x64px (h-16 w-16) for space efficiency
No Newsletter: Focus on essential links only
Use Case: Internal pages, admin sections, or minimal designs

Newsletter-Focused Footer

Prominent newsletter subscription with minimal navigation. Ideal for content-heavy pages or newsletter landing pages.

Newsletter-Focused Footer Guidelines

Centered Layout: Newsletter form prominently centered
Horizontal Form: Email input + button on same row (desktop)
Minimal Navigation: Quick links in single row
Use Case: Content pages, blog posts, newsletter landing pages

Footer Implementation & Best Practices

Trauma-Informed Design

Gradient Background: Soft, welcoming gradient instead of harsh solid colors
Generous Spacing: py-12 md:py-16 for breathing room, reduces overwhelm
Smooth Transitions: duration-200 for all hover/focus states
Calming Colors: pepper-green-600 hover (not aggressive red)
Rounded Corners: rounded-2xl for soft, welcoming appearance

Accessibility (WCAG 2.2 AA)

Semantic HTML: <footer>, <nav> elements
ARIA Labels: Social icons have aria-label for screen readers
Form Labels: Newsletter input properly labeled
Keyboard Navigation: All links/buttons keyboard accessible
Color Contrast: 4.5:1 minimum ratio (text-the-end-700 on gradient)

Laravel Integration


<x-fds.footer variant="standard" />


<x-fds.footer variant="minimal" />


<x-fds.footer
    variant="newsletter-focused"
    :showBrand="true"
/>

Newsletter Form Pattern


<form action="/newsletter/subscribe" method="POST">
        <x-fds.input
        type="email"
        name="email"
        placeholder="you@example.com"
        required="true"
        size="md"
    />
    <x-fds.button
        type="submit"
        variant="secondary"
        size="md"
    >
        Subscribe
    </x-fds.button>
</form>

Responsive Behavior

Mobile (<768px): 1 column stack, vertical newsletter form
Tablet (768px-1024px): 2 columns, responsive grid
Desktop (>1024px): 4 columns + newsletter, horizontal form