Hakumi :: Rails ViewComponents

Basic

The simplest use of breadcrumb.

Code

<%= render Hakumi::Breadcrumb::Component.new do |breadcrumb| %>
  <% breadcrumb.with_item(title: "Home") %>
  <% breadcrumb.with_item(title: "Application Center", href: "#") %>
  <% breadcrumb.with_item(title: "Application List", href: "#") %>
  <% breadcrumb.with_item(title: "An Application") %>
<% end %>

With Icon

The icon can be placed before the text.

Code

<%= render Hakumi::Breadcrumb::Component.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "#") do %>
    <%= render Hakumi::Icon::Component.new(name: :home) %>
  <% end %>
  <% breadcrumb.with_item(href: "#") do %>
    <%= render Hakumi::Icon::Component.new(name: :user) %>
    <span style="margin-left: 4px;">Application List</span>
  <% end %>
  <% breadcrumb.with_item(title: "Application") %>
<% end %>

Custom Separator

The separator can be customized by setting the separator property.

Code

<%= render Hakumi::Breadcrumb::Component.new(separator: ">") do |breadcrumb| %>
  <% breadcrumb.with_item(title: "Home") %>
  <% breadcrumb.with_item(title: "Application Center", href: "#") %>
  <% breadcrumb.with_item(title: "Application List", href: "#") %>
  <% breadcrumb.with_item(title: "An Application") %>
<% end %>

With Dropdown

Breadcrumb items can have dropdown menus for sub-navigation.

Code

<%= render Hakumi::Breadcrumb::Component.new do |breadcrumb| %>
  <% breadcrumb.with_item(title: "Home") %>
  <% breadcrumb.with_item(
    title: "Application Center",
    menu: [
      { title: "Application List", href: "#" },
      { title: "Application Detail", href: "#" }
    ]
  ) %>
  <% breadcrumb.with_item(
    title: "Application List",
    menu: [
      { title: "General", href: "#" },
      { title: "Layout", href: "#" },
      { title: "Navigation", href: "#" }
    ]
  ) %>
  <% breadcrumb.with_item(title: "An Application") %>
<% end %>

Breadcrumb API

Prop	Type	Default	Description
`separator`	`String`	`"/"`	Custom separator between items.
`items (slot)`	`Slot`	`-`	Breadcrumb items defined via with_item.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the nav element.

Breadcrumb Item API

Prop	Type	Default	Description
`title`	`String`	`-`	The title of the breadcrumb item.
`href`	`String`	`-`	Target URL. If provided, renders as a link.
`target`	`String`	`-`	Link target attribute (e.g., _blank).
`menu`	`Array of Hashes`	`-`	Dropdown menu items. Each hash: { title:, href:, target: }.
`block`	`Block`	`-`	Custom content for the item (overrides title).