# AppShell

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

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `navigation` | `ReactNode` | `—` |
| `navigationSide` | `"start" \| "end"` | `"start"` |
| `navigationDrawer` | `AppShellNavigationDrawer` | `—` |
| `topBar` | `ReactNode \| (navigationTrigger: ReactNode) => ReactNode` | `—` |
| `footer` | `ReactNode` | `—` |
| `scroll` | `"content" \| "page"` | `"content"` |
| `mainId` | `string` | `—` |
| `mainAs` | `"main" \| "section"` | `"main"` |
| `mainLabel` | `string` | `—` |
| `mainRef` | `Ref<HTMLElement>` | `—` |
| `scrollLabel` | `string` | `—` |
| `scrollOrientation` | `ScrollAreaProps["orientation"]` | `—` |
| `scrollContentInset` | `ScrollAreaProps["contentInset"]` | `—` |
| `skipLabel` | `string` | `—` |
| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |