Breadcrumb

Trilha de navegação breadcrumb mostrando localização hierárquica.

Importação

import { Breadcrumb } from 'asterui'

Exemplos

Breadcrumb Básico

Navegação breadcrumb simples.

</>

• 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

Com Ícones

Breadcrumb com ícones.

</>

• 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

Use uma string ou nó 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

Orientado a Dados

Use a prop items para breadcrumbs orientados a dados.

</>

• 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

Largura Máxima com Rolagem

Breadcrumb com rolagem de overflow.

</>

• 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

Propriedade	Descrição	Tipo	Padrão
children	Componentes Breadcrumb.Item (padrão composto)	React.ReactNode	-
items	Dados de itens breadcrumb (padrão orientado a dados)	BreadcrumbItemType[]	-
separator	Separador personalizado entre itens	React.ReactNode	"/"
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

BreadcrumbItemType (para prop items)

Propriedade	Descrição	Tipo	Padrão
title	Título/rótulo do item	React.ReactNode	-
href	URL do link	string	-
onClick	Handler de clique	() => void	-
className	Classe CSS personalizada	string	-
data-testid	ID de teste para testes	string	-

Breadcrumb.Item (padrão composto)

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do item (texto ou elementos)	React.ReactNode	-
href	URL do link (torna o item clicável)	string	-
onClick	Handler de clique (torna o item clicável)	() => void	-
icon	Ícone para exibir antes do rótulo	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Dicas de Uso

• Omita href/onClick no último item para mostrar a localização atual
• Use classes de largura máxima para habilitar rolagem horizontal
• Adicione ícones usando a prop icon em Breadcrumb.Item