Page header

In FORMA

• Liegt in kit/arc/blocks/page-header und ist über @/forma/arc/blocks/page-header/page-header erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• The top of a project, repository, or record page with breadcrumbs, status, people, and tabs.
• Detail pages with long content where the header should fold into a compact bar as people scroll.
• Headers that need a few primary actions plus an overflow menu for the rest.

When not to use

• Use tabs and breadcrumb on their own when the page only needs navigation, not status and people.
• Use workspace-sidebar for app-level navigation between sections.
• Use settings-page for settings screens that need a section nav rather than a record header.

Usage

import { PageHeader } from "@/forma/arc/blocks/page-header/page-header";

export default function ProjectPage() {
  return (
    <main>
      <PageHeader />
    </main>
  );
}

API reference

PageHeader

A self-contained project header with breadcrumbs, status, members, progress, tabs and an actions menu that condenses into a compact bar on scroll. The project, people, tabs and counts are sample data declared at the top of page-header.tsx.

No props.

Keyboard interactions

Accessibility

• Tabs use Radix roles (tab, tabpanel) and the current breadcrumb carries aria-current.
• The icon-only actions trigger has aria-label="More actions"; disabled items use aria-disabled.
• A polite role="status" region announces results of Follow, Share, Copy link and Archive.

Motion

• Past a short scroll threshold the header folds into a compact bar; the tab indicator glides with a shared layoutId and counts roll with Animated counter.
• Reduced motion swaps springs for fades, uses instant scroll instead of smooth, and keeps widths static.

Responsive behavior

• A ResizeObserver moves secondary actions into the menu when the action row runs out of room.
• Below a 560px container the root breadcrumb hides, the tab row scrolls sideways with a faded edge, and below 460px the create button drops to an icon.
• The header condenses from the scroll of its own inner scroller, not the window, so page content must live inside that scroller.

Performance

• Scroll handling only compares scrollTop to a 16px threshold, so it re-renders when crossing it, not on every frame.
• Tab counts roll with Animated counter and the tab indicator uses a shared layoutId; both are cheap at a handful of tabs.

Notes for AI

• Use at the top of a project, repository or record page that scrolls beneath it.
• The block takes no props: replace the in-file project, people and tab data with your own, or lift them into props.
• Follow, Share update, Copy link, New issue and Archive are simulated; wire them to your API and the breadcrumbs to your router.
• Composes Arc Button, Badge, Animated counter, Avatar, Avatar group and Progress.

Related

• Tabs: Switch between related content in the same context.
• Breadcrumb: Show where a page sits in a hierarchy.
• Avatar group: Show a team or set of contributors in a small space.
• Dropdown menu: A focused list of actions anchored to a trigger.
• Sidebar: Workspace: A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt