Breadcrumb

Breadcrumb (UI) — Design System (Symfony UX Toolkit / shadcn)

BASE CONGELADA (não mude por instância): A estrutura semantica nav[aria-label=breadcrumb] > ol > li e toda a a11y: aria-current=page na pagina atual, role=presentation + aria-hidden nos separadores, role=link/aria-disabled na pagina, sr-only "More" nas reticencias. Congelados tambem: tipografia (text-sm, font-normal), convencao de cor (muted-foreground nos links com hover:text-foreground; foreground na pagina atual), espacamento (gap-1.5 na lista, gap-1 no item), o glifo padrao do separador (chevron-right em size-3.5), o wrap-break-word e o suporte a RTL (rtl:rotate-180). Nada disso muda por instancia — so na fonte da verdade, para todos.

USO: <twig:Breadcrumb />

CAPACIDADES OPT-IN (ligue sem alterar o visual):
- Colapsar trilha longa: Quando a trilha passa de N segmentos, oculta os do meio em um Breadcrumb:Ellipsis mantendo raiz e pagina atual, evitando quebra de linha em caminhos profundos. [number]- Reticencias expansivel: Torna o '...' clicavel: abre um menu com os segmentos ocultos pelo colapso, para navegar direto a qualquer nivel intermediario. [toggle]- Menu de irmaos na pagina atual: Faz a pagina atual (nao clicavel) virar gatilho de menu que lista paginas irmas do mesmo nivel hierarquico, para troca lateral sem voltar. [toggle]- Icones nos itens: Adiciona icone-guia aos segmentos: casa no raiz e/ou icone por item (pasta, arquivo, tipo de pagina), como conteudo aditivo, sem alterar a tipografia da base. [select → Casa no raiz / Icone por item / Casa no raiz + icone por item]- Truncar rotulos longos: Corta rotulos extensos numa largura maxima com reticencia e expoe o texto completo via title/hover — alternativa ao wrap da base para manter a trilha em uma linha. [select → Curto / Medio / Longo]- Tooltip no item: Ao passar o mouse ou focar um segmento, exibe tooltip com o rotulo completo ou uma descricao do nivel — util junto do truncamento. [toggle]- Copiar caminho: Botao que copia a trilha textual completa ('Inicio / Componentes / Breadcrumb') para a area de transferencia; acao aditiva anexada a trilha. [toggle]- Dados estruturados (SEO): Emite marcacao schema.org BreadcrumbList (JSON-LD) espelhando a trilha, para mecanismos de busca. Metadado invisivel, zero mudanca visual. [toggle]- Gerar pela rota: Monta a trilha automaticamente a partir da hierarquia da rota/requisicao atual do Symfony, em vez de marcacao manual item a item. Muda a fonte dos dados, nao o visual. [toggle]FAÇA:
- Use <twig:Nome> — a base é congelada, você é dono do template em templates/components/.
- Ligue apenas capacidades opt-in listadas (e_funcao=true); a aparência não muda ao ligá-las.
- Passe atributos extras (id, aria-*, name, data-*) via {{ attributes }}.
NÃO FAÇA:
- Não mude cor/fonte/cantos/espaçamento por instância — é decisão de BASE, na fonte única assets/styles/app.css.
- Não crie variante/fork para a mesma coisa — existe UMA base por componente.
- Não reimplemente o componente nem adicione toolchain Node.
TESTE ANTES DE MUDAR: "é função ou é base?" — função = capacidade opt-in; base = mude o token na fonte única (assets/styles/app.css), para todos.

A11Y (herdada da base): A estrutura semantica nav[aria-label=breadcrumb] > ol > li e toda a a11y: aria-current=page na pagina atual, role=presentation + aria-hidden nos separadores, role=link/aria-disabled na pagina, sr-only "More" nas reticencias

{
    "$schema_version": "1.0",
    "id": "breadcrumb",
    "component": "Breadcrumb",
    "eixo": "ui",
    "particularidade": "Breadcrumb e uma trilha de navegacao hierarquica: uma sequencia ordenada raiz -> pagina atual, com separadores entre niveis, uma pagina final nao clicavel e um ponto de colapso (reticencias). Seus desafios sao profundidade/comprimento do caminho e hierarquia — nao entrada de dados —, entao enriquecer significa domar trilhas longas, revelar niveis ocultos e reforcar a semantica de navegacao/SEO, sem tocar no visual.",
    "base_congelada": "A estrutura semantica nav[aria-label=breadcrumb] > ol > li e toda a a11y: aria-current=page na pagina atual, role=presentation + aria-hidden nos separadores, role=link/aria-disabled na pagina, sr-only \"More\" nas reticencias. Congelados tambem: tipografia (text-sm, font-normal), convencao de cor (muted-foreground nos links com hover:text-foreground; foreground na pagina atual), espacamento (gap-1.5 na lista, gap-1 no item), o glifo padrao do separador (chevron-right em size-3.5), o wrap-break-word e o suporte a RTL (rtl:rotate-180). Nada disso muda por instancia — so na fonte da verdade, para todos.",
    "props": [],
    "capacidades": [
        {
            "id": "colapsar-trilha-longa",
            "nome": "Colapsar trilha longa",
            "descricao": "Quando a trilha passa de N segmentos, oculta os do meio em um Breadcrumb:Ellipsis mantendo raiz e pagina atual, evitando quebra de linha em caminhos profundos.",
            "controle": "number",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (number). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "reticencias-expansivel",
            "nome": "Reticencias expansivel",
            "descricao": "Torna o '...' clicavel: abre um menu com os segmentos ocultos pelo colapso, para navegar direto a qualquer nivel intermediario.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "menu-de-irmaos-na-pagina-atual",
            "nome": "Menu de irmaos na pagina atual",
            "descricao": "Faz a pagina atual (nao clicavel) virar gatilho de menu que lista paginas irmas do mesmo nivel hierarquico, para troca lateral sem voltar.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "icones-nos-itens",
            "nome": "Icones nos itens",
            "descricao": "Adiciona icone-guia aos segmentos: casa no raiz e/ou icone por item (pasta, arquivo, tipo de pagina), como conteudo aditivo, sem alterar a tipografia da base.",
            "controle": "select",
            "opcoes": [
                "Casa no raiz",
                "Icone por item",
                "Casa no raiz + icone por item"
            ],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (select). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "truncar-rotulos-longos",
            "nome": "Truncar rotulos longos",
            "descricao": "Corta rotulos extensos numa largura maxima com reticencia e expoe o texto completo via title/hover — alternativa ao wrap da base para manter a trilha em uma linha.",
            "controle": "select",
            "opcoes": [
                "Curto",
                "Medio",
                "Longo"
            ],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (select). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "tooltip-no-item",
            "nome": "Tooltip no item",
            "descricao": "Ao passar o mouse ou focar um segmento, exibe tooltip com o rotulo completo ou uma descricao do nivel — util junto do truncamento.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "copiar-caminho",
            "nome": "Copiar caminho",
            "descricao": "Botao que copia a trilha textual completa ('Inicio / Componentes / Breadcrumb') para a area de transferencia; acao aditiva anexada a trilha.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": true,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "dados-estruturados-seo",
            "nome": "Dados estruturados (SEO)",
            "descricao": "Emite marcacao schema.org BreadcrumbList (JSON-LD) espelhando a trilha, para mecanismos de busca. Metadado invisivel, zero mudanca visual.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "gerar-pela-rota",
            "nome": "Gerar pela rota",
            "descricao": "Monta a trilha automaticamente a partir da hierarquia da rota/requisicao atual do Symfony, em vez de marcacao manual item a item. Muda a fonte dos dados, nao o visual.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/breadcrumb; comportamento via controller Stimulus. Não altera a base."
        }
    ],
    "snippet_uso": "<twig:Breadcrumb />",
    "exemplo_demo": "<twig:Breadcrumb>\n    <twig:Breadcrumb:List>\n        <twig:Breadcrumb:Item>\n            <twig:Breadcrumb:Link href=\"#\">Home</twig:Breadcrumb:Link>\n        </twig:Breadcrumb:Item>\n        <twig:Breadcrumb:Separator />\n        <twig:Breadcrumb:Item>\n            <twig:Breadcrumb:Ellipsis />\n        </twig:Breadcrumb:Item>\n        <twig:Breadcrumb:Separator />\n        <twig:Breadcrumb:Item>\n            <twig:Breadcrumb:Link href=\"#\">Components</twig:Breadcrumb:Link>\n        </twig:Breadcrumb:Item>\n        <twig:Breadcrumb:Separator />\n        <twig:Breadcrumb:Item>\n            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>\n        </twig:Breadcrumb:Item>\n    </twig:Breadcrumb:List>\n</twig:Breadcrumb>",
    "regras": {
        "faca": [
            "Use <twig:Nome> — a base é congelada, você é dono do template em templates/components/.",
            "Ligue apenas capacidades opt-in listadas (e_funcao=true); a aparência não muda ao ligá-las.",
            "Passe atributos extras (id, aria-*, name, data-*) via {{ attributes }}."
        ],
        "nao_faca": [
            "Não mude cor/fonte/cantos/espaçamento por instância — é decisão de BASE, na fonte única assets/styles/app.css.",
            "Não crie variante/fork para a mesma coisa — existe UMA base por componente.",
            "Não reimplemente o componente nem adicione toolchain Node."
        ]
    },
    "a11y": "A estrutura semantica nav[aria-label=breadcrumb] > ol > li e toda a a11y: aria-current=page na pagina atual, role=presentation + aria-hidden nos separadores, role=link/aria-disabled na pagina, sr-only \"More\" nas reticencias",
    "mcp": {
        "tool": "get_component",
        "args": {
            "id": "breadcrumb"
        }
    },
    "props_nota": "Sem props próprias declaradas: a base repassa atributos nativos via {{ attributes }} (id, name, type, value, aria-*, data-*). Props específicas, quando existem, ficam nos subcomponentes."
}