componentes

breadcrumb

Uma lista de links que representam a hierarquia do site.

índice

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

items

List of items to display.

trueundefinedIBreadcrumbItem[]

rootElement

Root element link and text.

false{ link: '/', text: 'home' }IBreadcrumbItem

contractionButtonAriaLabel

Aria label for the contraction button element.

falsemenu reduzidostring

*valores gerados automaticamente.

propriedades do array de items

nometipodescriçãodefault
textstringTexto apresentado na telaundefined
linkstringLink de redirecionamentoundefined
onClickfunctionFunção customizada para ser chamada no click do linkundefined

formatação

Formatação do breadcrumb. Breadcrumb com 3 níveis de profundidade. Nome da página anterior e corrente são representadas com texto (1 e 4). O ícone de seta separa os níveis (2). O ícone de reticiências representa um agrupamento de páginas (3).
  1. Page link: link que redireciona para outra página.
  2. Separator: ícone que separa visualmente os itens do breadcrumb.
  3. Group: agrupamento de páginas.
  4. Current page: texto indicando a página atual.

uso

O breadcrumb é um componente usado para suplementar a navegação do site. Ele deve representar a hierarquia do site em casos de navegação mais profunda. É importante ressaltar que o breadcrumb não é um histórico de páginas acessadas pelo usuário e portanto não muda dinamicamente.

Página usando o componente steps com 3 passos. O passo 3, atual, tem escrito endereço.
certoPara representar as etapas de um fluxo, prefira componentes como steps.
Página usando breadcrumb com os respectivos links: início, dados de contato e endereço.
erradoNão use o breadcrumb para representar uma sequência de passos.

grupos e alinhamento

  • Verticalmente, o breadcrumb pode ser posicionado dentro do header (nos casos aplicáveis) ou imediatamente abaixo dele. Fica a uma distância $spacing-stack-small do título da página.
  • Horizontalmente, é alinhado a esquerda, junto ao início do container de conteúdo.
Ilustração de página web. O breadcrumb é posicionado abaixo do header e acima do título da página, com alinhamento a esquerda.alinhamento do breadcrumb

guia de conteúdo

  • Os links devem corresponder ao nome das páginas aos quais se referem.
  • Representa a navegação do site, não o histórico de passos do usuário.
  • O último item leva o nome da página atual.

guia de design

esperado

  • Tem símbolo no Figma.
  • Tem todos estados aplicáveis.
  • Atende ao nível AA de acessibilidade (WCAG 2.1).
  • Usa os design tokens.
  • Possui versão responsiva.
  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Possui todas as variações necessárias.
  • Possui versão web.
  • Possui versão mobile.

ideal

  • Atende ao nível AAA de acessibilidade (WCAG 2.1).
  • Tem microinterações no Figma.
  • Possui animações no componente.
  • Tem em todos os frameworks com que trabalhamos.
  • Comporta múltiplos idiomas.

    conteúdo relacionado

    Migração do United para Olist Design System

    Propriedades

    UnitedOlist Design System
    stepsitems
    currentStep❌
    ❌rootElement
    ❌contractionButtonAriaLabel

    Atributos de Steps

    UnitedOlist Design System
    key❌
    nametext
    linklink
    stepProps❌
    done❌
    ❌onClick