Skip to main content
Maquina
Docs components

Breadcrumbs

Displays the current location within a hierarchy.

Usage

<%= render "components/breadcrumbs" do %>
  <%= render "components/breadcrumbs/list" do %>
    <%= render "components/breadcrumbs/item" do %>
      <%= render "components/breadcrumbs/link", href: "/" do %>Home<% end %>
    <% end %>
    <%= render "components/breadcrumbs/separator" %>
    <%= render "components/breadcrumbs/item" do %>
      <%= render "components/breadcrumbs/link", href: "/components" do %>Components<% end %>
    <% end %>
    <%= render "components/breadcrumbs/separator" %>
    <%= render "components/breadcrumbs/item" do %>
      <%= render "components/breadcrumbs/page" do %>Breadcrumbs<% end %>
    <% end %>
  <% end %>
<% end %>

Using Helper

<%= breadcrumbs({"Home" => root_path, "Users" => users_path}, "John Doe") %>

Examples

With Icons

<%= render "components/breadcrumbs/link", href: "/" do %>
  <%= icon_for(:home, class: "size-4") %>
  Home
<% end %>

Custom Separators

<%= render "components/breadcrumbs/separator", icon: :slash %>
<%= render "components/breadcrumbs/separator", icon: :arrow_right %>

With Ellipsis

<%= render "components/breadcrumbs/item" do %>
  <%= render "components/breadcrumbs/ellipsis" %>
<% end %>

Responsive

<%= responsive_breadcrumbs(
  {"Home" => "/", "Docs" => "/docs", "Components" => "/components"},
  "Breadcrumbs"
) %>

API Reference

Breadcrumbs

Parameter Type Default Description
responsive Boolean false Enable auto-collapse on narrow screens
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs List

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs Item

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs Link

Parameter Type Default Description
href String required Link destination
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs Page

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs Separator

Parameter Type Default Description
icon Symbol :chevron_right Icon name, or :custom to use block
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Breadcrumbs Ellipsis

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes