Breadcrumb

Shows the path to the current resource as a hierarchy of links.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add breadcrumb --yes

The breadcrumb registry item installs these files:

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

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Separators and the ellipsis are decorative (aria-hidden); the current page carries aria-current="page".

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "/") { "Home" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_page { "Current page" } %>

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "/") { "Home" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_page { "Current page" } %>
    <% end %>
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::BreadcrumbComponent.new do %>
  <%= render Ui::Breadcrumb::ListComponent.new do %>
    <%= render Ui::Breadcrumb::ItemComponent.new do %>
      <%= render Ui::Breadcrumb::PageComponent.new do %>
        Current page
      <% end %>
    <% end %>
  <% end %>

<%= render Ui::BreadcrumbComponent.new do %>
  <%= render Ui::Breadcrumb::ListComponent.new do %>
    <%= render Ui::Breadcrumb::ItemComponent.new do %>
      <%= render Ui::Breadcrumb::PageComponent.new do %>
        Current page
      <% end %>
    <% end %>
  <% end %>
<% end %>

Composition

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

Examples

Default

A trail of links with the current page marked aria-current="page".

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Home" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Components" } %>

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Home" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Components" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_page { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

Collapsed

Use ui_breadcrumb_ellipsis for long trails.

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

<%= ui_breadcrumb do %>
  <%= ui_breadcrumb_list do %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_link(href: "#") { "Home" } %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_ellipsis %>
    <% end %>
    <%= ui_breadcrumb_separator %>
    <%= ui_breadcrumb_item do %>
      <%= ui_breadcrumb_page { "Breadcrumb" } %>
    <% end %>
  <% end %>
<% end %>

Custom separator

Pass a block to the separator to replace the default chevron.

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

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

API reference

Every part accepts class / class_name and **attrs.

Helper	Element	Notes
`ui_breadcrumb`	`nav`	Ships with `aria-label="breadcrumb"` (overridable).
`ui_breadcrumb_list` / `ui_breadcrumb_item`	`ol` / `li`	The trail's structure.
`ui_breadcrumb_link`	`a`	Pass `href` like any other HTML attribute.
`ui_breadcrumb_page`	`span`	The current page: `role="link"`, `aria-disabled`, `aria-current="page"`.
`ui_breadcrumb_separator`	`li`	A chevron by default; the block replaces the icon.
`ui_breadcrumb_ellipsis`	`span`	A decorative marker for collapsed items.