# Header

> The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.

## Facts

- **Product**: Max
- **Family**: Navigation
- **Global**: `window.DigitalCrew.Header`
- **Source**: `digitalcrew-orchestrator: components/ui/container-scroll-animation.tsx`
- **Import in the app**: `import { Header } from "@/components/ui/container-scroll-animation";`
- **Live preview**: /design/components/header/preview.html
- **Page**: /design/components/header

## Guidelines

**Use it for** the single header at the top of the authenticated layout. In Max its children are the search box, a `flex-1` spacer, the notification bell, [`ThemeSwitcher`](/design/components/theme-switcher.md) and the dock for the floating Max bubble.

**What you provide**:
- `children`.
- `fixed?: boolean`: makes the header sticky at the top and adds a shadow once the page has scrolled more than 10px.
- `className`, `ref`, and any `<header>` attribute.

It must sit inside `SidebarProvider`, because its trigger reads the sidebar context.

**Anatomy**:
- `z-50`, `h-14` (56px) and `sm:h-16` (64px), the height of a desktop title bar.
- The inner row is `border-b border-border/60 px-3 sm:px-4` with `gap-2 sm:gap-3`.
- The `SidebarTrigger` uses the outline variant and is hidden below `md`: on phones the tab bar's More button opens the menu.
- A vertical [`Separator`](/design/components/separator.md) (`h-6`) shows from `md` up.
- When `fixed` and scrolled, a `bg-background/20 backdrop-blur-lg` layer sits behind the row.

**Behaviour**: a passive `scroll` listener on the document tracks the offset. The shadow and blur apply only when `fixed`.

**Don't** add a second header inside a page. Page actions belong in the page, under the header.

## API

```ts
export declare const ContainerScroll: ({ titleComponent, children, }: {
    titleComponent: string | React.ReactNode;
    children: React.ReactNode;
}) => any;
export declare const Header: ({ translate, titleComponent }: {
    translate: MotionValue<number>;
    titleComponent: React.ReactNode;
}) => any;
export declare const Card: ({ rotate, scale, children, }: {
    rotate: MotionValue<number>;
    scale: MotionValue<number>;
    translate: MotionValue<number>;
    children: React.ReactNode;
}) => any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    // Header reads the sidebar context for its trigger, so it needs a SidebarProvider above it.
    return h(DC.SidebarProvider, { className: "min-h-0" },
      h("div", { className: "w-full overflow-hidden rounded-[10px] border border-glass bg-background/70" },
        h(DC.Header, null,
          h(DC.Button, { variant: "outline", size: "sm", className: "h-8 w-56 justify-start bg-muted/25 text-muted-foreground" },
            h(I.Search), "Search..."),
          h("div", { className: "flex-1" }),
          h(DC.Button, { variant: "ghost", size: "icon", className: "relative rounded-full", "aria-label": "Notifications" },
            h(I.Bell), h("span", { className: "absolute top-2 right-2 size-2 rounded-full bg-primary" })),
          h(DC.ThemeSwitcher)),
        h("div", { className: "px-4 py-4 text-sm text-muted-foreground" }, "Page content scrolls under the header; with fixed it sticks and gains a shadow past 10px.")));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Navigation

- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [ListMapToggle](/design/components/list-map-toggle.md): A two-button segmented switch between a List view and a Map view.
- [Pagination](/design/components/pagination.md): Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.