AppShell

Use AppShell

A workspace layout with optional navigation, top bar and footer, plus a keyboard skip target.

"use client";

import { FloodRoot, AppShell, AppTopBar, PageHeader, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <AppShell topBar={<AppTopBar start={<Text>Workspace</Text>} />}><PageHeader title="Projects" /></AppShell>
    </FloodRoot>
  );
}

Design notes

• Use content scrolling for a full-window application, including record queues whose row count changes. It keeps the navigation, top bar and footer outside the work scrollport. Use scroll="page" for a document that scrolls as a whole.
• Content mode uses Flood ScrollArea. Set scrollContentInset="none" when existing workspace padding clears the overlay rails and the content width needs to stay fixed.
• Supply Sidebar for docked navigation. Set navigationDrawer with a shell-width threshold and Drawer content to swap automatically. Share accepted route and branch state between the two presentations.
• Use mainAs="section" only when embedding a shell inside an existing main landmark.

API reference