Breadcrumb

Rastro de navegación breadcrumb que muestra la ubicación jerárquica.

Importar

import { Breadcrumb } from 'asterui'

Ejemplos

Breadcrumb Básico

Navegación breadcrumb simple.

</>

• Home
• Documents
• Add Document

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item>Add Document</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

Con Iconos

Breadcrumb con iconos.

</>

• Home
• Documents
• Add Document

import { Breadcrumb } from 'asterui'
import { FolderIcon, DocumentTextIcon } from '@aster-ui/icons'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/" icon={<FolderIcon size="sm" />}>
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="/documents" icon={<FolderIcon size="sm" />}>
          Documents
        </Breadcrumb.Item>
        <Breadcrumb.Item icon={<DocumentTextIcon size="sm" />}>
          Add Document
        </Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

Separador Personalizado

Usa una cadena o nodo de React como separador.

</>

• Home
• /
• Products
• /
• Details

• Home
• Products
• Details

import { Breadcrumb } from 'asterui'
import { ChevronRightIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="space-y-4">
        <Breadcrumb separator="/">
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
        <Breadcrumb separator={<ChevronRightIcon size="sm" />}>
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
      </div>
    )
}

export default App

Basado en Datos

Usa la prop items para breadcrumbs basados en datos.

</>

• Home
• Products
• Category
• Item Details

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb
        items={[
          { title: 'Home', href: '/' },
          { title: 'Products', href: '/products' },
          { title: 'Category', href: '/products/category' },
          { title: 'Item Details' },
        ]}
      />
    )
}

export default App

Ancho Máximo con Scroll

Breadcrumb con desplazamiento de desbordamiento.

</>

• Home
• Documents
• Projects
• Team
• Add New Member

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb className="max-w-xs">
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
        <Breadcrumb.Item href="/team">Team</Breadcrumb.Item>
        <Breadcrumb.Item>Add New Member</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

API

Breadcrumb

Propiedad	Descripción	Tipo	Predeterminado
children	Componentes Breadcrumb.Item (patrón compuesto)	React.ReactNode	-
items	Datos de elementos de breadcrumb (patrón basado en datos)	BreadcrumbItemType[]	-
separator	Separador personalizado entre elementos	React.ReactNode	"/"
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

BreadcrumbItemType (para prop items)

Propiedad	Descripción	Tipo	Predeterminado
title	Título/etiqueta del elemento	React.ReactNode	-
href	URL del enlace	string	-
onClick	Manejador de clic	() => void	-
className	Clase CSS personalizada	string	-
data-testid	ID de prueba para pruebas	string	-

Breadcrumb.Item (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del elemento (texto o elementos)	React.ReactNode	-
href	URL del enlace (hace que el elemento sea clicable)	string	-
onClick	Manejador de clic (hace que el elemento sea clicable)	() => void	-
icon	Icono a mostrar antes de la etiqueta	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Consejos de Uso

• Omite href/onClick en el último elemento para mostrar la ubicación actual
• Usa clases de ancho máximo para habilitar el desplazamiento horizontal
• Agrega iconos usando la prop icon en Breadcrumb.Item