Page Layout

A flexible layout pattern that composes Header, Breadcrumbs, SecondaryNav, TertiaryNav, and Footer with automatic z-index and sticky positioning management.

Key Features:

Automatic z-index stacking (50 → 45 → 40 → 30)
Dynamic sticky positioning calculations
Optional composition (all slots are optional)
Responsive container constraints (max-w-7xl)
Theme-aware styling and glass morphism backgrounds

♿ Accessibility:

Semantic landmark structure using <main>
Proper z-index stacking prevents focusable elements from being hidden
Maintains natural and logical reading order
Consistent navigation positioning builds user familiarity

Usage Example

import { PageLayout, Header, Breadcrumbs } from '@opencosmos/ui';

<PageLayout
  header={<Header logo="Sage" navLinks={links} />}
  breadcrumbs={<Breadcrumbs items={breadcrumbItems} />}
  secondaryNav={<SecondaryNav items={sections} />}
>
  <article className="p-8">
    <h1>Your Page Content</h1>
    <p>Everything inside the main body.</p>
  </article>
</PageLayout>