App Shell

The standard application layout: Nav Header on top, side navigation at the inline-start edge and the page content on the canvas background.

Loading demo: app-shell-default

Installation

npx sdaia-ui@latest add app-shell

Usage

import { AppShell } from '@/components/ui/AppShell';
import { NavHeaderMenuItem } from '@/components/ui/NavHeaderMenuItem';
import { NavLogoPlaceholder } from '@/components/ui/NavLogoPlaceholder';

1<AppShell
2  header={(layout) => ({
3    logo: <NavLogoPlaceholder size="medium" text="SDAIA" />,
4    items: [<NavHeaderMenuItem key="home" label="Home" mobile={layout === "compact"} />],
5  })}
6  sideNavigation={{ groups, footerProps: { mainText: "User name" } }}
7  navigation="expanded"
8>
9  {/* page content */}
10</AppShell>

Examples

Responsive behaviour

Desktop (1280 px and wider): full Nav Header bar, side navigation column (255 px expanded or 64 px collapsed) and the content.
Tablet and phone (below 1280 px): the side navigation collapses into the header menu. The Nav Header shows its compact bar (logo and menu button); the menu lists the header items, then the side navigation groups and footer, then the header actions. The content always gets the full width.
The header menu is bounded to the screen height and scrolls on its own, so every entry stays reachable on short screens.
Content padding follows the spacing token: 24 px on desktop, 20 px on tablet, 16 px on phone. The switch is CSS-only, so server and client render the same markup.

Accessibility

Landmarks: <header> holds the Nav Header <nav>, the side navigation is its own labelled <nav>, and the page content is the <main> landmark.
A skip link is the first Tab stop. It appears on focus and moves focus to the content (labels.skipToContent).
The side navigation toggle reports aria-expanded. The current item carries aria-current="page" in both the side navigation and its copy in the header menu.
The header menu is a disclosure: the menu button reports aria-expanded, Escape closes the menu and returns focus to the button, and choosing a side navigation item closes it too.
Give the two navigations different names (Nav Header labels.navigation

AppShell

Prop	Type	Default	Required
header	AppShellHeaderProps \| (layout: "desktop" \| "compact") => AppShellHeaderProps	—	optional
sideNavigation	AppShellSideNavigationProps	—

Activity

Area Chart