Topbar

Usage

• Use it as the topbar of an AppFrame to show where the user is and the actions for the current page.
• Keep actions few; on phones the “Edited” label, Copy link and Favorite are hidden and only the current crumb is shown.
• App screens: pass your own actions (or none: the right side stays empty). Document pages: opt into the document actions with edited, onShare, onCopyLink, onFavorite and moreSlot.
• Don’t use it as a site header with primary navigation; put navigation in the Sidebar.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { Topbar, TopbarButton, BreadcrumbTrail } from '@krackedui/motion';

export function TopbarExample() {
  // Document actions are opt-in: each one shows when its prop is set.

  return (
    <Topbar
      breadcrumbs={<BreadcrumbTrail items={[{ title: 'Team wiki' }, { title: 'Q4 roadmap', icon: '🗺️' }]} />}
      edited="Edited 2m ago"
      onShare={() => console.log('Share')}
      onCopyLink={() => console.log('Copy link')}
      favorite={false}
      onFavorite={() => console.log('Favorite')}
      moreSlot={<TopbarButton icon="ellipsis" label="Actions" iconSize={22} tone="primary" />}
    />
  );
}

Examples

Collapsed sidebar and favorite

Custom actions

Composition

<Topbar breadcrumbs actions>        // header, 44px
  breadcrumb region → [menu button < 768px] · [» when collapsed] · <BreadcrumbTrail items privacy/>
  actions           → your own `actions` (built from <TopbarButton/> or Button), or
                      opt-in document actions (<TopbarActions/>): Edited · Share · Copy link · Favorite · Actions (moreSlot),
                      each shown only when its prop is set; nothing by default
</Topbar>

API Reference

Topbar

Based on <header>. Adds:

BreadcrumbTrail

Based on <div>.

TopbarButton

Based on <button>. 28x28, radius 6.

TopbarActions

The document action cluster on its own (e.g. as a peek's actions). Each control renders only when its prop is set; with none it renders nothing.

Accessibility

• Rendered as header. BreadcrumbTrail is a nav "Breadcrumb" with an ordered list; the last crumb has aria-current="page".
• Inside an AppFrame on phones, the "Open sidebar" menu button opens the drawer (aria-expanded); focus returns to it when the drawer closes.
• Every icon button has an aria-label and a tooltip; Favorite exposes aria-pressed.
• With idle, the bar fades out but comes back on hover and on keyboard focus (focus-within).
• Pass a Menu.Trigger as moreSlot so the Actions button opens a keyboard-navigable menu.