Header Bar

The Header Bar component provides a standard application header with sidebar trigger button and breadcrumb navigation.

Basic Usage

With Multiple Breadcrumbs

Crumb Icons

A crumb's icon is a kebab-case Lucide icon name, resolved against lucide's runtime icons record — the same surface ui:breadcrumb, ui:button and the action:* family resolve against, reached through the same shared resolver. A name that is not a live key of that record (an unknown, or a retired spelling such as layout) renders no glyph, never a fallback glyph and never the literal name as text.

crumbs and a ui:breadcrumb's items are the same declared item shape, so an icon authored on either draws the same glyph.

Styling

className is merged onto the header's root header element, after the header's own classes, through cn() (tailwind-merge). A utility you write that conflicts with one of the defaults replaces it; any other class is added.

{
  "type": "header-bar",
  "className": "h-20 sm:h-20 bg-muted/40",
  "crumbs": [
    { "label": "Home", "href": "#" },
    { "label": "Reports" }
  ]
}

A conflict is decided per variant. The default height is h-14, and sm:h-16 from the sm breakpoint up, so h-20 alone replaces only the first: from sm up the header is still h-16. Write sm:h-20 too, as above, for one height at every width.

Without className, the header renders its default classes unchanged.

Schema

import type { SchemaNode } from '@object-ui/types';

interface BreadcrumbItem {
  label: string;                         // Breadcrumb text
  href?: string;                         // Link URL (optional for last item)
  icon?: string;                         // kebab-case Lucide icon name (e.g. "panels-top-left")
  siblings?: Array<{ label: string; href: string }>;  // Quick-switch dropdown
}

interface HeaderBarSchema {
  type: 'header-bar';
  
  // Breadcrumbs
  crumbs?: BreadcrumbItem[];             // Breadcrumb items

  // Search
  search?: {
    enabled: boolean;                    // Draws the search input when true
    placeholder?: string;                // Input placeholder text
    shortcut?: string;                   // Hint in the input from `sm` up, e.g. "⌘K" (text only)
  };

  // Right side, after the search input
  actions?: SchemaNode[];                // Nodes rendered in order
  rightContent?: SchemaNode;             // One node, rendered after `actions`
  
  // Styling
  className?: string;                    // Tailwind classes, merged onto the root header element
  
  // Base properties
  id?: string;
  visible?: boolean | string | { dialect?: string; source: string };
  testId?: string;
}

Retired keys

title, logo, nav, left, center, right, sticky and height are retired on this node (objectui#10387, alongside variant from objectui#10286). The renderer never read any of them, so an authored value drew the same header as leaving it out. They now fail validation by name, and the TypeScript declaration types each one never. Delete the key:

• title — name the current page with the last entry of crumbs.
• logo — put brand content in rightContent or actions.
• nav — put links in crumbs, or use a navigation-menu / sidebar node.
• left / center — put custom content in rightContent or actions.
• right — use actions (a node list) or rightContent (one node).
• sticky — make the parent layout sticky; the header itself never was.
• height — set the height with className instead (see Styling). By default it is h-14, and sm:h-16 from the sm breakpoint up.

Examples

Application Header

Settings Navigation

Admin Panel

Usage Notes

• The Header Bar component includes a sidebar trigger button that works with the Sidebar component
• The last breadcrumb item is typically rendered as plain text (current page)
• A crumb may carry an icon (see Crumb Icons) and siblings, which turns it into a quick-switch dropdown
• All other breadcrumb items should have an href to enable navigation
• The header is h-14 (56px) tall, and h-16 (64px) from the sm breakpoint up; className overrides either (see Styling)
• Includes a vertical separator between the sidebar trigger and breadcrumbs

Integration

This component is designed to work with the sidebar layout pattern:

{
  type: 'div',
  children: [
    { type: 'sidebar', /* sidebar config */ },
    {
      type: 'div',
      className: 'flex-1',
      children: [
        { 
          type: 'header-bar',
          crumbs: [
            { label: 'Home', href: '#' },
            { label: 'Current' }
          ]
        },
        {
          type: 'main',
          className: 'p-6',
          children: [
            // Main content
          ]
        }
      ]
    }
  ]
}