AppShell

A complete application shell organism that composes header, sidebar, main content, and footer into a cohesive layout. Supports responsive sidebar with mobile overlay and toggle functionality.

Basic Shell (No Sidebar)

My App

Welcome to the App

This is the main content area of the application shell.

With Sidebar

Note: On mobile viewports, the sidebar becomes a slide-out panel with an overlay.

Documentation

Introduction

Welcome to the documentation. This shell demonstrates the sidebar layout that's common in documentation sites.

Getting Started

Follow the setup guide to get started with the design system.

Usage Example

<x-interface-frameworks.app-shell>
    <x-slot:header>
        <x-interface-frameworks.app-header ... />
    </x-slot:header>

    Main content goes here

    <x-slot:footer>
        <x-interface-frameworks.app-footer ... />
    </x-slot:footer>
</x-interface-frameworks.app-shell>

<!-- With sidebar -->
<x-interface-frameworks.app-shell :hasSidebar="true">
    <x-slot:header>...</x-slot:header>
    <x-slot:sidebar>...</x-slot:sidebar>
    Main content
    <x-slot:footer>...</x-slot:footer>
</x-interface-frameworks.app-shell>

Props

Prop	Type	Default	Description
hasSidebar	boolean	false	Enable sidebar layout
sidebarPosition	string	'left'	Sidebar position: 'left' or 'right'
class	string	''	Additional CSS classes

Slots

Slot	Description
header	Header content (typically AppHeader)
sidebar	Sidebar content (typically DocsSidebar)
default	Main content area
footer	Footer content (typically AppFooter)

Accessibility Features

Skip to main content link available
Main content has id="main-content" for skip link target
Mobile sidebar toggle has aria-expanded
Mobile overlay closes on click outside or Escape key
Focus management when opening/closing mobile sidebar