# WebTopBar

> The frame's row across the top of the desktop layout, and the desktop app's title bar — a start lined up with the rail, a center on the window's center line, and an end on the column margin.

Source: https://raft-design.botiverse.build/components/web-top-bar. Generated from the current release; where it differs from what you remember, this page is right.

WebTopBar is the yellow row across the top of the desktop layout, above the rail: on the web from 768px, and as the desktop app's title bar at every width. It owns the bar's height, surface, seam and alignments; the product puts its controls in its three parts ([Page structure](https://raft-design.botiverse.build/patterns/page-structure.md#the-web-top-bar)).

```tsx
import { Bell, Search } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  Button,
  SearchTrigger,
  SearchTriggerLabel,
  SearchTriggerShortcut,
  WorkspaceButton,
  WorkspaceButtonName,
} from "@botiverse/raft-ui";
import {
  WebTopBarCenter,
  WebTopBarEnd,
  WebTopBarRoot,
  WebTopBarStart,
} from "@botiverse/raft-ui/wip";

/**
 * The web top bar from 768px: the frame's row above the rail. The workspace
 * button on the left, lined up with the rail's items; the search field
 * centered on the window; the bell at the right end, its icon box on the
 * column margin. The product puts the workspace strip after the button and
 * who is working before the bell.
 */
export function WebTopBarComposition() {
  return (
    <div className="w-full overflow-x-auto">
      <WebTopBarRoot className="min-w-[720px]">
        <WebTopBarStart>
          <WorkspaceButton aria-label="Raft HQ, switch server">
            <Avatar type="server" size="sm">
              <AvatarFallback>R</AvatarFallback>
            </Avatar>
            <WorkspaceButtonName>Raft HQ</WorkspaceButtonName>
          </WorkspaceButton>
        </WebTopBarStart>
        <WebTopBarCenter>
          <SearchTrigger className="w-[min(32vw,420px)]">
            <Search aria-hidden />
            <SearchTriggerLabel>Search</SearchTriggerLabel>
            <SearchTriggerShortcut>⌘K</SearchTriggerShortcut>
          </SearchTrigger>
        </WebTopBarCenter>
        <WebTopBarEnd>
          <Button variant="on-frame" size="icon-md" aria-label="Notifications">
            <Bell />
          </Button>
        </WebTopBarEnd>
      </WebTopBarRoot>
    </div>
  );
}
```

## When to use

| Situation                                                                               | Use                                                  |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| The top of the desktop layout on the web, from 768px                                    | WebTopBar                                            |
| The desktop app's title bar, at every width                                             | WebTopBar                                            |
| The top of a pane: a conversation, a side panel, a drawer                               | [Panel](https://raft-design.botiverse.build/components/panel.md)'s `PanelHeader`           |
| The top of a top-level page on a phone                                                  | `PanelSectionHeader` ([Panel](https://raft-design.botiverse.build/components/panel.md))    |
| The desktop layout without the top bar (the apps' desktop mode, a server's public page) | The rail header ([AppRail](https://raft-design.botiverse.build/components/app-rail.md)) |

## Anatomy

- `WebTopBarRoot`: the bar. The frame item with the header air above and below (5px with a mouse, 6px on a touch screen), so the bar is 44px tall with a mouse (34 + 2 × 5) and 48px on a touch screen (36 + 2 × 6); `layer-frame` with a `line-seam` along its bottom edge, and the theme's decoration (`frame-decor-top`). It keeps its height in short windows. Holds the three parts below, in order, all three required.
- `WebTopBarStart`: the workspace button, then the workspace strip; in the desktop app, Back, Forward and History after them. It starts as far from the left edge as the rail's items (6px with a mouse, 8px on a touch screen), so the workspace button lines up with the rail's buttons under it.
- `WebTopBarCenter`: the search field (`SearchTrigger`, [Search](https://raft-design.botiverse.build/components/search.md)), centered on the window.
- `WebTopBarEnd`: who is working, then the bell; in the desktop app, the update chip before who is working. Its last icon button's icon box ends on the column margin (16px with a mouse, 20px on a touch screen), and the button hangs past it by its icon inset ([Alignment](https://raft-design.botiverse.build/foundations/alignment.md#the-ends-of-a-header)).

## Behavior

- **Width.** WebTopBar renders at every width. The web app renders it only from 768px, where the desktop layout starts ([Responsive layout](https://raft-design.botiverse.build/patterns/responsive.md)); the desktop app renders it at every width.
- **Centering.** The start and the end are two equal columns, so the center sits on the window's center line whatever each side holds and however differently the two ends are inset.
- **Narrow windows.** A side never shrinks below its content, so neither side and the center ever cover each other. When a side's content is wider than half of what the center leaves, the center moves toward the other side; when the two sides leave less than the center's width, the center narrows, down to 160px; past that, the bar overflows its container. At 768px, with `SearchTrigger` at its smallest (360px), each side has 204px, its inset included.
- **Frame insets.** Each end is padded by its frame inset as well (`--raft-frame-inset-start`, `--raft-frame-inset-end`): the window's own controls in the desktop app, such as the macOS traffic lights; 0 on the web. The center stays on the window's center line, not on what the window's controls leave ([Frame insets](https://raft-design.botiverse.build/patterns/page-structure.md#frame-insets)).
- **Decoration.** A decorated theme draws its strip at the bar's right from 1024px. Set `--frame-decor-top-end` on the root to the end part's width plus 16px, and `--frame-decor-top: none` when the strip doesn't fit between the center and the end.

## Accessibility

- The bar has no role of its own. In the app, render it as the page's banner with `render={<header />}`; in a docs canvas or another page's region, leave it a `div`.
- Each control brings its own name: the workspace button names the server, the bell says "Notifications" ([WorkspaceButton](https://raft-design.botiverse.build/components/workspace-button.md)).

## Rules

- Put product controls in the three parts only; put nothing directly in the root, because the root's three columns are the start, the center and the end.
- Don't size the parts or pad the bar from outside: the insets are what line the start up with the rail and the end up with the headers under it.

## API

### WebTopBarRoot

The web top bar: the frame's row above the rail from 768px on the web, and a desktop app's title bar at every width. Holds `WebTopBarStart`, `WebTopBarCenter` and `WebTopBarEnd`, in that order. It renders at every width; the web app renders it only from 768px.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### WebTopBarStart

The start of the bar, lined up with the rail's items: the workspace button and the workspace strip.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### WebTopBarCenter

The center of the bar, centered on the window: the search field.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

### WebTopBarEnd

The end of the bar: who is working and the bell. A last icon button's icon box ends on the column margin.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.