Breadcrumb - Hakumi Components

Basic

The simplest use of breadcrumb.

Code

<%= render HakumiComponents::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

Icons can be placed before the text in breadcrumb items.

Code

<%= render HakumiComponents::Breadcrumb::Component.new do |breadcrumb| %>
  <% breadcrumb.with_item(href: "#") do %>
    <%= render HakumiComponents::Icon::Component.new(name: :home) %>
  <% end %>
  <% breadcrumb.with_item(href: "#") do %>
    <%= render HakumiComponents::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 HakumiComponents::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 HakumiComponents::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 %>

Props

Prop	Type	Default	Description
`separator`	`String`	`"/"`	Custom separator text between breadcrumb items

Slots

Prop	Type	Default	Description
`items`	`Slot (renders_many)`	`nil`	Breadcrumb items defined via with_items

Breadcrumb Item Props

Props for individual breadcrumb items

Prop	Type	Default	Description
`title`	`String`	`nil`	Text displayed for the breadcrumb item
`href`	`String`	`nil`	Target URL (renders as link if provided, otherwise as plain text)
`target`	`String`	`nil`	Link target attribute (e.g., _blank)
`menu`	`Array of Hashes`	`nil`	Dropdown menu items with title, href, and target keys

HTML Options

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Additional HTML attributes merged into the nav element