Bunfx components

App shell

Use the app shell components together to give application pages a consistent header, navigation area, and main content region. This documentation site uses the same structure around this content.

type AppLayoutProps = {
  children: ComponentChildren;
};

function AppLayout({ children }: AppLayoutProps) {
  return (
    <>
      <SkipLink />
      <AppShell>
        <AppShellHeader>
          <SiteHeader />
        </AppShellHeader>
        <AppShellBody>
          <AppShellNavigation>
            <SideNavigation aria-label="Projects" items={items} />
          </AppShellNavigation>
          <AppShellMain>{children}</AppShellMain>
        </AppShellBody>
      </AppShell>
    </>
  );
}

Pages then use that application-owned layout with a page header and their content:

<AppLayout>
  <PageHeader
    context="Projects"
    title="Project overview"
    subtitle="Review progress and upcoming work."
  />
  <ProjectSummary />
</AppLayout>

Anatomy

Compose AppShellHeader and AppShellBody inside AppShell, then place AppShellNavigation and AppShellMain in the body. The application owns the header branding, supplies navigation, and defines an AppLayout so every application page gets the same required structure.

Accessibility

Place a SkipLink before the shell. AppShellMain uses main-content as its default identifier so the default skip-link target works without extra configuration. Both identifiers can be changed when a page needs a different target.

On narrow screens, navigation uses a native details and summary disclosure. It remains operable without JavaScript and becomes a persistent, independently scrolling navigation column on wider screens.

If the application uses a sticky header, set --app-shell-navigation-inset-block-start to its block size so the navigation remains below it and uses the remaining viewport height.

When to use it

Use the app shell for products with repeated application-wide branding and navigation. Simpler content, authentication, and standalone status pages may be clearer with a smaller purpose-built layout.