Blocks

Breadcrumb

Shows the user's location within a site hierarchy and allows navigation to ancestor pages.

Installation

bin/rails g shadcnrb:component breadcrumb

Usage

Build the breadcrumb by composing bc.list, bc.item, bc.link, bc.separator, and bc.page.

<%= sui.breadcrumb do |bc| %>
  <%= bc.list do %>
    <%= bc.item do %>
      <%= bc.link "Home", root_path %>
    <% end %>
    <%= bc.separator %>
    <%= bc.item do %>
      <%= bc.link "Components", "#" %>
    <% end %>
    <%= bc.separator %>
    <%= bc.item do %>
      <%= bc.page "Breadcrumb" %>
    <% end %>
  <% end %>
<% end %>

With ellipsis

Use bc.ellipsis to collapse middle segments in long paths.

<%= sui.breadcrumb do |bc| %>
  <%= bc.list do %>
    <%= bc.item do %>
      <%= bc.link "Home", root_path %>
    <% end %>
    <%= bc.separator %>
    <%= bc.item do %>
      <%= bc.ellipsis %>
    <% end %>
    <%= bc.separator %>
    <%= bc.item do %>
      <%= bc.link "Components", "#" %>
    <% end %>
    <%= bc.separator %>
    <%= bc.item do %>
      <%= bc.page "Breadcrumb" %>
    <% end %>
  <% end %>
<% end %>

API

Method	Args	Default	Description
`sui.breadcrumb`	—	—	Root `<nav>` with `aria-label="breadcrumb"`. Yields a `bc` proxy.
`bc.list`	—	—	Ordered list (`<ol>`) that wraps all items.
`bc.item`	—	—	Individual `<li>` wrapper for a link, page, or ellipsis.
`bc.link(name, url)`	`&block`	—	Clickable ancestor link. Shortcut mirrors Rails `link_to`. Pass a block to render a styled `<span>` wrapper around a custom `link_to` / `button_to`.
`bc.page(name)`	—	—	Non-clickable current page label with `aria-current="page"`.
`bc.separator`	—	chevron-right icon	Visual divider between items. Pass a block to render a custom separator.
`bc.ellipsis`	—	more-horizontal icon	Collapsed segment indicator. Renders a `more-horizontal` icon by default.