sebs7n-ui

NavegaciónServer Component

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, … } from "sebs7n-ui/breadcrumb"

Ejemplos

Una página de detalle

Los separadores los pone `BreadcrumbList`. El último nivel no es link: lleva `aria-current="page"`.

import Link from "next/link"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"

function Basico() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs" />}>Inicio</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs/components/table" />}>Clientes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage>Acme S.A.</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Muchos niveles: colapsar el medio

`maxItems={4}` deja el primero, un «…» con nombre accesible y los dos últimos.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"

function Colapsado() {
  return (
    <Breadcrumb>
      <BreadcrumbList maxItems={4}>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Inicio</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Clientes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Acme S.A.</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Facturas</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbPage>0012</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Dentro de un PageHeader

Acá va `BreadcrumbList` **suelto**: el `<nav>` ya lo pone la prop `breadcrumb`.

import { BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "sebs7n-ui/breadcrumb"
import { PageHeader, PageHeaderTitle } from "sebs7n-ui/page-header"
import { SlashIcon } from "lucide-react"

function EnPageHeader() {
  return (
    <PageHeader
      breadcrumb={
        <BreadcrumbList separator={<SlashIcon />}>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Facturas</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbPage>0012</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      }
    >
      <PageHeaderTitle>Factura 0012</PageHeaderTitle>
    </PageHeader>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Hereda las props de <nav>.

Prop	Tipo	Por defecto	Descripción
`aria-label`	`string`	`"Migas de pan"`	Nombre accesible del elemento.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbEllipsis

Hereda las props de <li>.

Prop	Tipo	Por defecto	Descripción
`label`	`string`	`"Rutas intermedias"`	Nombre accesible: el «…» en sí es decoración.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbItem

Hereda las props de <li>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbLink

Hereda las props de <a>.

Prop	Tipo	Por defecto	Descripción
`render`	`RenderElement`	—	El elemento que se renderiza en lugar del `<a>`: `render={<Link href="/x" />}`. Clona el elemento del llamador —no es el `render` de Base UI— así que sigue siendo un `<a>`.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbList

Hereda las props de <ol>.

Prop	Tipo	Por defecto	Descripción
`ellipsisLabel`	`string`	`"Rutas intermedias"`	Nombre accesible del «…».
`itemsAfter`	`number`	`2`	Cuántos ítems quedan después del «…». El último es la página actual.
`itemsBefore`	`number`	`1`	Cuántos ítems quedan antes del «…».
`maxItems`	`number`	—	A partir de cuántos ítems se colapsa el medio. Sin valor, no colapsa nunca. El «…» además tiene que tapar dos o más ítems, así que con `maxItems={4}` el colapso arranca recién en el quinto nivel.
`separator`	`React.ReactNode`	—	Reemplaza el chevron. Es decoración: va `aria-hidden`.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbPage

Hereda las props de <span>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

BreadcrumbSeparator

Hereda las props de <li>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: Recorre los links. El último nivel no es link, así que no entra al orden de tabulación.
Enter: Navega.

Accesibilidad

Es un <nav aria-label="Migas de pan"> con un <ol> adentro: el orden de los niveles es información, no estilo.
El separador es un <li role="presentation" aria-hidden="true">: el lector lee «Inicio, Clientes, 0012», no «Inicio barra Clientes».
El último nivel lleva aria-current="page" y no es un link: no se navega a donde ya estás.
El «…» del colapso tiene nombre accesible (ellipsisLabel); el carácter en sí es aria-hidden.
Sin "use client": los <a> salen en el HTML del server, que es lo que ve un crawler.

Reglas de uso

Dentro de `PageHeader` va `BreadcrumbList` suelto, sin Breadcrumb: el <nav> ya lo pone la prop breadcrumb, y dos landmarks anidados confunden. Si igual lo envolvés, PageHeader avisa por consola en desarrollo.
Los separadores los pone `BreadcrumbList`, no el llamador. Para cambiarlos, separator={<SlashIcon />}.
No inventes otro estilo de link: usa linkVariants({ variant: "subtle" }), el mismo de cualquier link suelto del sistema.
Con Next, render={<Link href="/clientes" />}: sigue siendo un <a>, se abre en una pestaña nueva y el crawler lo ve.
De cuatro niveles para arriba, maxItems={4}. En mobile un breadcrumb de seis niveles ocupa tres líneas.
No es un reemplazo del botón «Volver» del navegador ni de la navegación principal: es contexto.

Relacionados

PageHeader NavigationMenu Pagination