# 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>
```