GitHub

App Layout

Main application layout structure with sidebar and header

Basic Usage

Loading...

Installation

pnpm add @corew500/ui

Usage

import { AppLayout } from "@corew500/ui/app-layout"

<AppLayout>Content</AppLayout>

CMS Integration

CMSPayload CMS Integration
This component supports CMS-driven content via @corew500/cms-payload.
Loading...

API Reference

Props

PropTypeDefaultDescription
sidebar*enumSidebar element (use AppSidebar or custom Sidebar)
headerenumHeader element (use AppHeader or custom header)
contentClassNamestringAdditional className for the main content area
defaultOpenenumtrueDefault sidebar open state

Accessibility

Keyboard Navigation

  • Keyboard accessible navigation via underlying Sidebar component

Screen Readers

  • Sidebar trigger includes accessible label for screen readers

Additional

  • - Uses semantic HTML elements (header, main, nav)
  • Navigation items support isActive state for current page indication

Localization

Translatable Content

  • - Pass translated strings to title props and nav item titles

Additional

  • Section titles in nav prop should be localized
  • Use renderLink for framework-specific internationalized routing