App Layout
Dashboard frame that joins the Sidebar, Navbar and page content. Only the content scrolls.
Floating sidebar
The default. The sidebar is a glass card floating over the canvas; each section is its own card.
Inset sidebar
The sidebar blends into the canvas and the content becomes one large card.
Usage
import { AppLayout } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Every signed-in dashboard page.
When not to use
- Sign-in and public pages.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sidebar | ReactNode | required | |
navbar | ReactNode | - | |
aside | ReactNode | - | |
sidebarVariant | 'floating' | 'inset' | 'floating' |
Accessibility
- A skip link is the first focus stop.
- Below 1280 px the sidebar becomes a rail; below 768 px it is hidden.