Breadcrumbs

Display ancestor links above a page title so users can navigate back through a hierarchy. The page title itself serves as the current location, so breadcrumbs contain only links to parent pages.

Basic usage

<%= l_ui_breadcrumbs do %>
  <%= l_ui_breadcrumb_item "Home", root_path %>
  <%= l_ui_breadcrumb_item "Components", buttons_path %>
<% end %>

With a title bar helper

Primary

<%= l_ui_title_bar(
  title: "Primary",
  breadcrumbs: [
    ["Home", root_path],
    ["Buttons", buttons_path]
  ]
) do %>
  <button type="button" class="l-ui-button l-ui-button--primary">New</button>
<% end %>

Helper reference

Breadcrumbs helper methods
Helper	Description
`l_ui_breadcrumbs`	Wraps breadcrumb items in a `<nav>` with `aria-label="Breadcrumb"`
`l_ui_breadcrumb_item(label, path)`	Renders a linked breadcrumb item with a separator
`l_ui_title_bar(title:, breadcrumbs: [], actions: nil, &block)`	Renders breadcrumbs, an `<h1>` title, and optional actions in a responsive title bar

CSS classes

Breadcrumbs CSS classes
Class	Description
`l-ui-breadcrumbs`	Wrapper nav element
`l-ui-breadcrumbs__list`	Ordered list containing items
`l-ui-breadcrumbs__item`	Individual breadcrumb item with separator
`l-ui-breadcrumbs__link`	Link styling within breadcrumb items
`l-ui-title-bar`	Responsive wrapper for breadcrumbs, title, and actions
`l-ui-title-bar__content`	Content column containing breadcrumbs and title
`l-ui-title-bar__title`	Page title element
`l-ui-title-bar__actions`	Action area for buttons or links