componente · @solu30/ui-kit/navigation

HeaderBar

Encabezado de página con título, subtítulo, migas de pan y acciones a la derecha.

Seguir leyendo — 1 párrafo más

HeaderBar displays a page title, optional subtitle, breadcrumbs, and action buttons with consistent spacing. Uses CSS variables for theming:

--ui-content-primary for title text
--ui-content-muted for subtitle and breadcrumbs
--ui-accent for interactive breadcrumb hover

2 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

elliot
zentrya

La pieza, con lugar de pantalla

Cargando el espécimen…

export function HeaderBarSpecimen() {
  return (
    <Stage label="HeaderBar · el encabezado sticky de Zentrya — el wrapper es del consumidor, no del kit" tall wide>
      <div className="flex w-full flex-col gap-6">
        <div className="overflow-hidden rounded-xl border border-content/10">
          {/* El wrapper textual de `admin-page-header.tsx:37`. `sticky` no
              hace nada acá dentro (no hay scroll propio), pero se copia para
              que se vea de qué se hace cargo el consumidor. */}
          <div className="sticky top-0 z-10 border-b border-content/10 bg-container shadow-sm">
            <HeaderBar
              title="Mensajería"
              subtitle="3 canales conectados"
              breadcrumbs={[{ label: 'Zentrya' }, { label: 'Mensajería', onClick: () => {} }]}
              actions={
                <Button variant="secondary" size="sm" icon={IconSettings}>
                  Configurar
                </Button>
              }
            />
          </div>
          <div className="space-y-2 bg-bkg p-4">
            <div className="h-16 rounded-lg bg-container" />
            <div className="h-16 rounded-lg bg-container" />
          </div>
        </div>

        <div className="flex flex-col gap-2 rounded-xl border border-content/10 bg-container p-4">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            BreadcrumbsFromPath — deriva los crumbs de un pathname, no de un array a mano
          </span>
          <BreadcrumbsFromPath
            pathname="/admin/saas/projects/prj_gs/roadmap"
            routeLabels={{
              saas: 'SolaaS',
              projects: 'Projects',
              prj_gs: 'GestorSalon',
              roadmap: 'Roadmap',
            }}
            skipLeadingSegments={1}
            renderLink={(_href, label) => (
              <span className="max-w-[150px] truncate text-content/60 transition-colors hover:text-content">
                {label}
              </span>
            )}
          />
          <p className="text-[11px] text-content/60">
            `skipLeadingSegments={1}` se come el `/admin` de adelante; los ids de proyecto
            (`prj_gs`) se traducen por `routeLabels`, que es un diccionario plano segmento →
            etiqueta.
          </p>
        </div>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · HeaderBarSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { HeaderBar } from '@solu30/ui-kit/navigation'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
title	sí	`string`	Page title
subtitle	opcional	`string`	Optional subtitle below the title
breadcrumbs	opcional	`HeaderBreadcrumb[]`	Breadcrumb navigation items
actions	opcional	`React__default.ReactNode`	Action buttons or controls displayed to the right of the title
children	opcional	`React__default.ReactNode`	Additional content rendered below the title row
className	opcional	`string`	—
titleClassName	opcional	`string`	—
subtitleClassName	opcional	`string`	—

Ejemplo del paquete

<HeaderBar title="Reservas" subtitle="Agosto 2026"
  breadcrumbs={[{ label: 'Inicio', href: '/' }, { label: 'Reservas' }]}
  actions={<Button onClick={crear}>Nueva</Button>} />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.