VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="max-w-80">
<nav aria-label="Breadcrumb" class="text-xs">
  <ol class="flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5">
    <li class="inline-flex items-center gap-1.5" data-breadcrumb-text="Workspace" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Workspace" data-breadcrumb-href="#" href="#" class="inline-flex items-center gap-2 whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background underline-offset-4 hover:underline max-w-32 truncate text-xs text-muted-foreground font-normal justify-start rounded">
        Workspace
      </a>
    </li>
    <li role="presentation"><span class="text-muted-foreground/70 text-xs" aria-hidden="true">/</span></li>
    <li class="inline-flex items-center gap-1.5" data-breadcrumb-text="Very Long Project Name That Should Truncate" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Very Long Project Name That Should Truncate" data-breadcrumb-href="#" href="#" class="inline-flex items-center gap-2 whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background underline-offset-4 hover:underline max-w-32 truncate text-xs text-muted-foreground font-normal justify-start rounded">
        Very Long Project Name That Should Truncate
      </a>
    </li>
    <li role="presentation"><span class="text-muted-foreground/70 text-xs" aria-hidden="true">/</span></li>
    <li class="inline-flex items-center gap-1.5" data-breadcrumb-text="Settings" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Settings" data-breadcrumb-href="#" href="#" class="inline-flex items-center gap-2 whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background underline-offset-4 hover:underline max-w-32 truncate text-xs text-muted-foreground font-normal justify-start rounded">
        Settings
      </a>
    </li>
    <li role="presentation"><span class="text-muted-foreground/70 text-xs" aria-hidden="true">/</span></li>
    <li class="inline-flex items-center gap-1.5" data-breadcrumb-text="General" data-breadcrumb-href="#" data-last="true">
      <a aria-current="page" data-breadcrumb-text="General" data-breadcrumb-href="#" href="#" class="inline-flex items-center gap-2 whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background underline-offset-4 hover:underline text-xs text-foreground font-normal justify-start rounded">
        General
      </a>
    </li>
  </ol>
</nav></div>
1
2
3
4
5
6
7
8
<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>

No notes provided.

No params configured.