Breadcrumb

import Link from "next/link"

import {

Il breadcrumb mostra la posizione della pagina corrente nella gerarchia del sito e collega ogni livello che le sta sopra. Non è una primitiva Base UI — solo HTML semantico (nav + <ol>) che usa useRender di Base UI per la composizione tramite la prop render — rifinito secondo la ricetta neobrutalista: link nel carattere dei titoli, la pagina corrente in grassetto nel colore di primo piano.

Quando usarlo:

• Documentazione e knowledge base — Docs / Componenti / Breadcrumb; chi legge risale di un livello senza andare a caccia nella barra laterale.
• Alberi di categorie e-commerce — Home / Abbigliamento / Giacche fa uscire da una pagina prodotto in profondità con un solo clic.
• Dashboard e file browser — progetti annidati, impostazioni o percorsi di cartelle dove l’URL da solo non basta a orientarsi.

Installazione#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
npx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/breadcrumb.json
Copia

import * as React from "react"
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      aria-label="breadcrumb"
      data-slot="breadcrumb"
      className={cn(className)}
      {...props}
    />
  )
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("font-head transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("font-medium text-foreground", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? <ChevronRightIcon className="cn-rtl-flip" />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn(
        "flex size-5 items-center justify-center [&>svg]:size-4",
        className
      )}
      {...props}
    >
      <MoreHorizontalIcon />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}

Utilizzo#

Copiaimport {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

Copia<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composizione#

Usa la seguente composizione per costruire un Breadcrumb:

CopiaBreadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Esempi#

Base#

Un breadcrumb di base con un link alla home e un link ai componenti.

import {
  Breadcrumb,
  BreadcrumbItem,

Separatore personalizzato#

Usa un componente personalizzato come children di <BreadcrumbSeparator /> per creare un separatore personalizzato.

import Link from "next/link"
import { DotIcon } from "lucide-react"

Menu a discesa#

Puoi comporre <BreadcrumbItem /> con un <DropdownMenu /> per creare un menu a discesa nel breadcrumb.

import Link from "next/link"
import { ChevronDownIcon, DotIcon } from "lucide-react"

Compresso#

Forniamo un componente <BreadcrumbEllipsis /> per mostrare uno stato compresso quando il breadcrumb è troppo lungo.

import Link from "next/link"

import {

Componente link#

Per usare un componente link personalizzato dalla tua libreria di routing, puoi usare la prop render su <BreadcrumbLink />.

import Link from "next/link"

import {

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import Link from "next/link"

Accessibilità#

Il breadcrumb segue il pattern WAI-ARIA Breadcrumb: Breadcrumb rende un landmark <nav aria-label="breadcrumb"> che avvolge un elenco ordinato, quindi gli screen reader lo annunciano come navigazione breadcrumb e gli utenti possono saltarci direttamente. BreadcrumbPage porta aria-current="page" per contrassegnare la posizione corrente, e i separatori sono aria-hidden, quindi non vengono letti ad alta voce. Le voci sono semplici link — comportamento standard di Tab ed Enter, nessun collegamento da tastiera aggiuntivo da fare.

Riferimento API#

Breadcrumb#

Il componente Breadcrumb è l'elemento di navigazione radice che avvolge tutti i componenti del breadcrumb.

BreadcrumbList#

Il componente BreadcrumbList mostra l'elenco ordinato degli elementi del breadcrumb.

BreadcrumbItem#

Il componente BreadcrumbItem avvolge i singoli elementi del breadcrumb.

BreadcrumbLink#

Il componente BreadcrumbLink mostra un link cliccabile nel breadcrumb.

BreadcrumbPage#

Il componente BreadcrumbPage mostra la pagina corrente nel breadcrumb (non cliccabile).

BreadcrumbSeparator#

Il componente BreadcrumbSeparator mostra un separatore tra gli elementi del breadcrumb. Puoi passare children personalizzati per sostituire l'icona del separatore predefinita.

BreadcrumbEllipsis#

Il componente BreadcrumbEllipsis mostra dei puntini di sospensione per gli elementi compressi del breadcrumb.