shadcn-rails

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component breadcrumb

Usage

Use the with_item method to add breadcrumb items. Set current: true on the last item to mark it as the current page. 

<%= render Shadcn::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "/") { "Home" } %>
  <% breadcrumb.with_item(href: "/components") { "Components" } %>
  <% breadcrumb.with_item(current: true) { "Breadcrumb" } %>
<% end %>

Examples

Basic

A simple breadcrumb navigation with links.

<%= render Shadcn::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "/") { "Home" } %>
  <% breadcrumb.with_item(href: "/docs") { "Docs" } %>
  <% breadcrumb.with_item(href: "/docs/components") { "Components" } %>
<% end %>

With Current Page

Mark the current page with current: true. The current page will be rendered as a <span> instead of a link. 

<%= render Shadcn::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "/") { "Home" } %>
  <% breadcrumb.with_item(href: "/products") { "Products" } %>
  <% breadcrumb.with_item(current: true) { "Laptop" } %>
<% end %>

Custom Styling

You can customize individual breadcrumb items with the class_name option. 

<%= render Shadcn::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "/", class_name: "font-bold") { "Home" } %>
  <% breadcrumb.with_item(href: "/docs", class_name: "italic") { "Docs" } %>
  <% breadcrumb.with_item(current: true) { "Breadcrumb" } %>
<% end %>

Custom Separator

The component uses a chevron right icon (>) as the default separator. The separator is automatically added between items and hidden from screen readers with aria-hidden="true". To customize the separator, you can override the separator method in the component.

API Reference

BreadcrumbComponent

The main breadcrumb container component.

API Reference

Prop Type Default Description
class_name String nil Additional CSS classes to apply to the nav element
**options Hash {} Additional HTML attributes to apply to the nav element

with_item (BreadcrumbItemComponent)

Individual breadcrumb item. Use this slot to add items to the breadcrumb navigation.

API Reference

Prop Type Default Description
href String nil URL for the breadcrumb link. If not provided, item will be rendered as a span
current Boolean false Whether this is the current page. Adds aria-current='page' and renders as span instead of link
class_name String nil Additional CSS classes to apply to the item
**options Hash {} Additional HTML attributes to apply to the item

Accessibility

The breadcrumb component follows WAI-ARIA best practices:

  • Uses <nav> element as the container with aria-label="Breadcrumb" for screen readers
  • Uses an ordered list (<ol>) to represent the navigation hierarchy
  • Current page is marked with aria-current="page" and aria-disabled="true"
  • Separators have aria-hidden="true" and role="presentation" to hide them from assistive technologies
  • Links have appropriate hover states and color contrast for visibility

Note: The breadcrumb navigation should always be placed in a consistent location across your site, typically near the top of the page, to help users understand where they are in your site's hierarchy.