AppShell

A responsive frame for navigation, workspace context, and your primary task.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Overview

Navigation and content share a responsive frame.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add app-shell

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<AppShell
  header={<strong>Workspace</strong>}
  sidebar={<nav aria-label="Workspace">...</nav>}
>
  <h1>Overview</h1>
</AppShell>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`header`	`ReactNode`	`required`
`sidebar`	`ReactNode`	`required`
`navigationLayout`	`sidebar \| top`	`sidebar`
`navigationLabel`	`string`	`Workspace navigation`
`contentAs / mainId`	`main \| div / string`	`main / main-content`
`children`	`ReactNode`	`—`

Accessibility

The mobile toggle exposes aria-expanded and aria-controls. Escape closes navigation and returns focus. Navigation links close the disclosure. Use contentAs="div" and a unique mainId when embedding a specimen inside an existing main landmark.