Breadcrumbs — Maquina Components

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