HeaderBar

Attio's own pages stack two of these: a top utility bar (breadcrumb + trailing icon actions — search, notifications) and a view bar directly under it (the view name + tabs + a primary action). Both measure the same 48px content height and 0 12px padding; only the top one carries the divider. HeaderBar is that shared shape with no content baked in — no bell, no search box, no breadcrumb — so a consumer supplies its own leading/title/trailing slots and stacks two with bordered={false} on the inner one, instead of hand-rolling the bar twice.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { HeaderBar, Breadcrumb } from "@crisp-ui-kit/crisp";

<HeaderBar
  title={<Breadcrumb items={[{ label: "Companies" }]} />}
  trailing={<SearchButton />}
/>;

Stack a second, unbordered bar directly under the first for a view bar:

<>
  <HeaderBar title={<Breadcrumb items={[{ label: "Companies" }]} />} trailing={<SearchButton />} />
  <HeaderBar bordered={false} title="All Companies" trailing={<NewCompanyButton />} />
</>

Props

Inside an AppShell

When the shell's sidebar is hidden its expand button sits at the top-left of the main pane. HeaderBar adds the shell's --crisp-appshell-header-inset (32px while hidden, 0 otherwise) to its start padding, so the breadcrumb moves from x=12 to x=44 instead of sitting under the button. Outside an AppShell the variable is unset and nothing changes.