Header

Sticky top navigation bar with title, breadcrumbs, and right-side action slots.

Preview · Header

Code

HTML · @primus/ui-core

<div style="display:flex;align-items:center;gap:1rem;padding:0.75rem 1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-medium);width:100%">
  <strong style="font-size:0.9rem">Primus Admin</strong>
  <span style="font-size:0.75rem;color:var(--muted-foreground)">/ Tenants</span>
  <div style="margin-inline-start:auto;display:flex;gap:0.5rem;align-items:center">
    <button class="ghost small">Help</button>
    <button class="icon small" title="Notifications">🔔</button>
    <button class="outline small">Jane Doe ▾</button>
  </div>
</div>

React

import { PrimusHeader } from 'primus-react-ui';

<PrimusHeader
  title="Primus Admin"
  breadcrumbs={[{ label: 'Dashboard', href: '/dashboard' }, { label: 'Tenants' }]}
  user={{ name: 'Jane Doe', email: 'jane@acme.com' }}
  onUserClick={() => setProfileOpen(true)}
/>

Angular

<primus-header title="Primus Admin" [breadcrumbs]="breadcrumbs"
  [user]="currentUser" (onUserClick)="openProfile()">
</primus-header>

Props

Prop	Type	Default	Description
title	string	—	Page title text
subtitle	string	—	Supporting subtitle below the title
breadcrumbs	Breadcrumb[]	—	Breadcrumb trail
user	HeaderUser	—	Current user — shows name + avatar button
actions	ReactNode	—	Right-side slot for buttons/menus
onUserClick / (onUserClick)	() => void	—	Fires when the user avatar/name is clicked

TypeScript interfaces

interface Breadcrumb {
  label: string;    // Display text
  href?: string;    // Link target — last breadcrumb typically has no href
}

interface HeaderUser {
  name:    string;
  email:   string;
  avatar?: string;  // URL to avatar image — falls back to initials if not provided
}

// Example
const breadcrumbs: Breadcrumb[] = [
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'Tenants',   href: '/tenants' },
  { label: 'Acme Corp' },              // current page — no href
];

const user: HeaderUser = {
  name:  'Jane Doe',
  email: 'jane@acme.com',
};

Version history

See the Changelog for version history and breaking changes.