Shadwire
Componentes

Breadcrumb

Exibe o caminho até o recurso atual usando uma hierarquia de links.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI: 

shadwire add breadcrumb --yes

O item breadcrumb do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/breadcrumb_component.rb
  • app/components/ui/breadcrumb/list_component.rb
  • app/components/ui/breadcrumb/item_component.rb
  • app/components/ui/breadcrumb/link_component.rb
  • app/components/ui/breadcrumb/page_component.rb
  • app/components/ui/breadcrumb/separator_component.rb
  • app/components/ui/breadcrumb/ellipsis_component.rb
  • app/components/ui/icon_component.rb
  • app/helpers/ui/breadcrumb_helper.rb
  • app/helpers/ui/icon_helper.rb
  • vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Separadores e ellipsis são decorativos (aria-hidden); a página atual usa aria-current="page". 

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "/") { "Início" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_page { "Página atual" } %>

Ou renderize os componentes diretamente: 

<%= render Ui::BreadcrumbComponent.new do %>
  <%= render Ui::Breadcrumb::ListComponent.new do %>
    <%= render Ui::Breadcrumb::ItemComponent.new do %>
      <%= render Ui::Breadcrumb::PageComponent.new do %>
        Página atual
      <% end %>
    <% end %>
  <% end %>

Composição

Breadcrumb (nav aria-label="breadcrumb")
`-- Breadcrumb::List (ol)
    |-- Breadcrumb::Item (li) > Breadcrumb::Link (a) ou Breadcrumb::Page (span)
    |-- Breadcrumb::Separator (li decorativo)
    `-- Breadcrumb::Ellipsis (span decorativo)

Exemplos

Padrão

Trilha com links e a página atual marcada com aria-current="page".

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Início" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Componentes" } %>

Recolhido

Use ui_breadcrumb_ellipsis para trilhas longas.

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Início" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_ellipsis %>

Separador custom

Passe um bloco ao separador para trocar o chevron padrão.

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Início" } %>
    <% end %>
    <%= ui_breadcrumb_separator do %>
      <%= ui_icon("slash", size: :sm) %>
    <% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Helper Elemento Notas
ui_breadcrumb nav Já vem com aria-label="breadcrumb" (sobrescritível).
ui_breadcrumb_list / ui_breadcrumb_item ol / li Estrutura da trilha.
ui_breadcrumb_link a Passe href via attrs.
ui_breadcrumb_page span Página atual: role="link", aria-disabled, aria-current="page".
ui_breadcrumb_separator li Chevron por padrão; o bloco substitui o ícone.
ui_breadcrumb_ellipsis span Indicador decorativo de itens recolhidos.