Breadcrumb

UI::Breadcrumb

The path to the current page, collapsing long trails.

# VelvetKit ## Breadcrumb (`UI::Breadcrumb`) The path to the current page, collapsing long trails. Add it: `bin/rails generate velvetkit:add breadcrumb` Also adds: `avatar`, `icon`, `link`, `spinner`, `button`, `popover` ### Arguments ```ruby UI::Breadcrumb.new(size: :sm, separator_icon: :slash, max_items: nil, collapse_at: :middle, class: nil, **html_attrs) ``` Slots: `with_item`, `with_ellipsis` ### Example: Default (sm) ```erb <div class="max-w-2xl"> <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %> <% bc.with_item(href: "#", text: "Workspace") %> <% bc.with_item(href: "#", text: "Website") %> <% bc.with_item(href: "#", text: "Issues") %> <% bc.with_item(href: "#", text: "#1234") %> <% end %> </div> ``` ### Example: Medium (md) ```erb <div class="max-w-2xl"> <%= render(UI::Breadcrumb.new(size: :md)) do |bc| %> <% bc.with_item(href: "#", text: "Workspace") %> <% bc.with_item(href: "#", text: "Website") %> <% bc.with_item(href: "#", text: "Issues") %> <% end %> </div> ``` ### Example: With Avatar ```erb <div class="max-w-2xl"> <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %> <% bc.with_item(href: "#", text: "Website", avatar_src: "/icon.png") %> <% bc.with_item(href: "#", text: "Projects", avatar_src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s") %> <% bc.with_item(href: "#", text: "Dashboard") %> <% bc.with_item(href: "#", text: "Settings") %> <% end %> </div> ``` ### Example: Long Path ```erb <div class="max-w-80"> <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %> <% bc.with_item(href: "#", text: "Workspace") %> <% bc.with_item(href: "#", text: "Very Long Project Name That Should Truncate") %> <% bc.with_item(href: "#", text: "Settings") %> <% bc.with_item(href: "#", text: "General") %> <% end %> </div> ``` ### Example: Collapsed (legacy explicit ellipsis) ```erb <div class="flex flex-col gap-8 max-w-xl"> <div> <h3 class="text-sm font-medium mb-2">Slot API — ellipsis at end</h3> <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %> <% bc.with_item(href: "#", text: "Projects") %> <% bc.with_item(href: "#", text: "Website", avatar_src: "/icon.png") %> <% bc.with_ellipsis do %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Settings" } %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Members" } %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Billing" } %> <% end %> <% bc.with_item(href: "#", text: "Dashboard") %> <% end %> </div> <div> <h3 class="text-sm font-medium mb-2">Compound API — ellipsis in middle</h3> <%= render(UI::Breadcrumb.new(size: :sm)) do %> <%= render(UI::Breadcrumb::List.new) do %> <%= render(UI::Breadcrumb::Item.new) do %> <%= render(UI::Link.new(href: "#", class: "text-xs text-muted-foreground max-w-32 truncate font-normal justify-start rounded-sm")) { "Handbook" } %> <% end %> <%= render(UI::Breadcrumb::Separator.new) %> <%= render(UI::Breadcrumb::Ellipsis.new) do %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Docs" } %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "API" } %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Platform" } %> <% end %> <%= render(UI::Breadcrumb::Separator.new) %> <%= render(UI::Breadcrumb::Item.new) do %> <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Cloud providers" } %> <% end %> <% end %> <% end %> </div> <div> <h3 class="text-sm font-medium mb-2">Compound API — ellipsis at start</h3> <%= render(UI::Breadcrumb.new(size: :sm)) do %> <%= render(UI::Breadcrumb::List.new) do %> <%= render(UI::Breadcrumb::Ellipsis.new) do %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Learn" } %> <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Tutorials" } %> <% end %> <%= render(UI::Breadcrumb::Separator.new) %> <%= render(UI::Breadcrumb::Item.new) do %> <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Getting Started" } %> <% end %> <% end %> <% end %> </div> </div> ```

bin/rails generate velvetkit:add breadcrumb

Also adds: Avatar Icon Link Spinner Button Popover
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Default (sm)

default.html.erb

<div class="max-w-2xl">
  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
    <% bc.with_item(href: "#", text: "Workspace") %>
    <% bc.with_item(href: "#", text: "Website") %>
    <% bc.with_item(href: "#", text: "Issues") %>
    <% bc.with_item(href: "#", text: "#1234") %>
  <% end %>
</div>

Medium (md)

medium.html.erb

<div class="max-w-2xl">
  <%= render(UI::Breadcrumb.new(size: :md)) do |bc| %>
    <% bc.with_item(href: "#", text: "Workspace") %>
    <% bc.with_item(href: "#", text: "Website") %>
    <% bc.with_item(href: "#", text: "Issues") %>
  <% end %>
</div>

With Avatar

with_avatar.html.erb

<div class="max-w-2xl">
  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
    <% bc.with_item(href: "#", text: "Website", avatar_src: "/icon.png") %>
    <% bc.with_item(href: "#", text: "Projects", avatar_src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s") %>
    <% bc.with_item(href: "#", text: "Dashboard") %>
    <% bc.with_item(href: "#", text: "Settings") %>
  <% end %>
</div>

Long Path

long_path.html.erb

<div class="max-w-80">
  <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
    <% bc.with_item(href: "#", text: "Workspace") %>
    <% bc.with_item(href: "#", text: "Very Long Project Name That Should Truncate") %>
    <% bc.with_item(href: "#", text: "Settings") %>
    <% bc.with_item(href: "#", text: "General") %>
  <% end %>
</div>

Collapsed (legacy explicit ellipsis)

Slot API — ellipsis at end

Compound API — ellipsis in middle

Compound API — ellipsis at start

collapsed.html.erb

<div class="flex flex-col gap-8 max-w-xl">
  <div>
    <h3 class="text-sm font-medium mb-2">Slot API — ellipsis at end</h3>
    <%= render(UI::Breadcrumb.new(size: :sm)) do |bc| %>
      <% bc.with_item(href: "#", text: "Projects") %>
      <% bc.with_item(href: "#", text: "Website",  avatar_src: "/icon.png") %>
      <% bc.with_ellipsis do %>
        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Settings" } %>
        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Members" } %>
        <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Billing" } %>
      <% end %>
      <% bc.with_item(href: "#", text: "Dashboard") %>
    <% end %>
  </div>
  <div>
    <h3 class="text-sm font-medium mb-2">Compound API — ellipsis in middle</h3>
    <%= render(UI::Breadcrumb.new(size: :sm)) do %>
      <%= render(UI::Breadcrumb::List.new) do %>
        <%= render(UI::Breadcrumb::Item.new) do %>
          <%= render(UI::Link.new(href: "#", class: "text-xs text-muted-foreground max-w-32 truncate font-normal justify-start rounded-sm")) { "Handbook" } %>
        <% end %>
        <%= render(UI::Breadcrumb::Separator.new) %>
        <%= render(UI::Breadcrumb::Ellipsis.new) do %>
          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Docs" } %>
          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "API" } %>
          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Platform" } %>
        <% end %>
        <%= render(UI::Breadcrumb::Separator.new) %>
        <%= render(UI::Breadcrumb::Item.new) do %>
          <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Cloud providers" } %>
        <% end %>
      <% end %>
    <% end %>
  </div>
  <div>
    <h3 class="text-sm font-medium mb-2">Compound API — ellipsis at start</h3>
    <%= render(UI::Breadcrumb.new(size: :sm)) do %>
      <%= render(UI::Breadcrumb::List.new) do %>
        <%= render(UI::Breadcrumb::Ellipsis.new) do %>
          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Learn" } %>
          <%= render(UI::Link.new(href: "#", class: "justify-start rounded-sm px-3 py-1.5 text-sm font-normal text-popover-foreground hover:bg-accent hover:text-accent-foreground hover:no-underline w-full")) { "Tutorials" } %>
        <% end %>
        <%= render(UI::Breadcrumb::Separator.new) %>
        <%= render(UI::Breadcrumb::Item.new) do %>
          <%= render(UI::Link.new(href: "#", class: "text-xs text-foreground font-normal justify-start rounded-sm", aria: { current: "page" })) { "Getting Started" } %>
        <% end %>
      <% end %>
    <% end %>
  </div>
</div>

API

Arguments

UI::Breadcrumb.new(size: :sm, separator_icon: :slash, max_items: nil, collapse_at: :middle, class: nil, **html_attrs)

Slots: with_item with_ellipsis