Breadcrumbs
One step back up, in the page header of a detail page: the list it came from, a slash, then this page's name as its heading.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { Breadcrumbs } from '@/ui/breadcrumbs';<Breadcrumbs> Monday shortlist digest</Breadcrumbs>Default
The parent list as a subtle link, a slash, then this page's name in ink as its heading.
import { Breadcrumbs } from '@/ui/breadcrumbs';
export default function BreadcrumbsDefault() {
return <Breadcrumbs parents={[{ href: '?page=rules', label: 'Rules' }]}>Monday shortlist digest</Breadcrumbs>;
}Record page
A record page shows its own chip, with its mark, as the last crumb.
import { Breadcrumbs } from '@/ui/breadcrumbs';
import { RecordChip } from '@/ui/record-chip';
// A record page shows its own chip, with its mark, as the last crumb.
export default function BreadcrumbsRecord() {
return (
<Breadcrumbs parents={[{ href: '?page=companies', label: 'Companies' }]}>
<RecordChip type="company" name="Halcyon Bank" domain="halcyonbank.com" variant="plain" />
</Breadcrumbs>
);
}In the page header
The trail sits in the 56px page header, with the page's actions at the end.
import { Breadcrumbs } from '@/ui/breadcrumbs';
import { Button } from '@/ui/button';
// In the app, PageHeader draws this 56px bar and passes its crumb to Breadcrumbs.
export default function BreadcrumbsInPageHeader() {
return (
<header className="flex h-14 w-full max-w-180 items-center gap-150 rounded-xlarge bg-surface px-300 shadow-raised">
<Breadcrumbs parents={[{ href: '?page=rules', label: 'Rules' }]} className="flex-1">
Monday shortlist digest
</Breadcrumbs>
<Button>Edit rule</Button>
</header>
);
}Long name
When the row runs out of room, the parent folds into the … menu first. Only then does the name cut, with the full name in a tooltip.
import { Breadcrumbs } from '@/ui/breadcrumbs';
// With one parent and no room left, Rules folds into the … menu first; then the name cuts, with the full name in a tooltip.
export default function BreadcrumbsLongName() {
return (
<div className="w-65">
<Breadcrumbs parents={[{ href: '?page=rules', label: 'Rules' }]}>Chase Halcyon Bank for interview feedback after 3 days</Breadcrumbs>
</div>
);
}Folding
The same trail at three widths: everything fits; Settings folds into the … menu; then Email templates folds too and the name cuts.
import { Breadcrumbs } from '@/ui/breadcrumbs';
// When the row runs out of room, the parents fold into the … menu first; only then does the name cut.
export default function BreadcrumbsFold() {
return (
<div className="flex w-full flex-col items-start gap-200">
<div className="w-120">
<Breadcrumbs parents={[{ href: '?page=settings', label: 'Settings' }, { href: '?page=templates', label: 'Email templates' }]}>
Interview confirmation for clients
</Breadcrumbs>
</div>
<div className="w-75">
<Breadcrumbs parents={[{ href: '?page=settings', label: 'Settings' }, { href: '?page=templates', label: 'Email templates' }]}>
Interview confirmation for clients
</Breadcrumbs>
</div>
<div className="w-45">
<Breadcrumbs parents={[{ href: '?page=settings', label: 'Settings' }, { href: '?page=templates', label: 'Email templates' }]}>
Interview confirmation for clients
</Breadcrumbs>
</div>
</div>
);
}View tabs and view menu
Saved Views sit as tabs in the page header, Archived last, then + to save the current table as a new View. Rename, delete and restore live in Display.
Keyboard shortcuts sheet
A side sheet listing every shortcut, grouped by where it works. Press ? or ⌘ / from anywhere in the workspace, or click Keyboard shortcuts in the sidebar.