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
<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="Website" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Website" 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">
        Website
      </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="Issues" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Issues" 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">
        Issues
      </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="#1234" data-breadcrumb-href="#" data-last="true">
      <a aria-current="page" data-breadcrumb-text="#1234" 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">
        #1234
      </a>
    </li>
  </ol>
</nav>
1
2
3
4
5
6
render(UI::Breadcrumb.new(size: size.to_sym)) 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

No notes provided.

Param Description Input

—