Components / UI components / Layout
Application layoutsExperimental alpha

WorkspaceShell

Named header, navigation, content, inspector and footer slots in one responsive workspace.

WorkspaceShell preview

Loading example…

Interactions use local sample data.

Usage and props

Supply real navigation and control visibility. Use mainAs="section" when embedding inside another main landmark.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

main · header? · navigation? · inspector? · footer? · mainAs? · scrollMode? · variant?
How state and callbacks work

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard