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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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" data-breadcrumb-target="ellipsis">
      <span class="inline-block" data-controller="ui--popover"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed" aria-label="More breadcrumb pages" id="ui-popover-trigger-ui-popover-344b822b" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-344b822b" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">      <i data-lucide="ellipsis" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
        </button>
        <div id="ui-popover-content-ui-popover-344b822b" class="z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-auto min-w-0 p-1" role="dialog" aria-modal="false" data-ui--popover-target="content" hidden="hidden" data-side="bottom" data-align="start" tabindex="-1">
          <ul class="flex flex-col gap-0.5" aria-label="Collapsed breadcrumb pages">
            <li>
              <a 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 text-primary underline-offset-4 hover:underline justify-start rounded-sm px-3 py-1.5 font-normal text-xs">
                Learn
              </a>
            </li>
            <li>
              <a 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 text-primary underline-offset-4 hover:underline justify-start rounded-sm px-3 py-1.5 font-normal text-xs">
                Tutorials
              </a>
            </li>
          </ul>
          <div class="absolute size-2 rotate-45 bg-popover border-border data-[side=top]:border-r data-[side=top]:border-b data-[side=bottom]:border-l data-[side=bottom]:border-t data-[side=left]:border-t data-[side=left]:border-r data-[side=right]:border-b data-[side=right]:border-l" data-ui--popover-target="arrow" data-side="bottom"></div>
        </div>
      </span>
    </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="Get Started" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Get Started" 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">
        Get Started
      </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="Components" data-breadcrumb-href="#">
      <a data-breadcrumb-text="Components" 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">
        Components
      </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="Breadcrumb" data-breadcrumb-href="#" data-last="true">
      <a aria-current="page" data-breadcrumb-text="Breadcrumb" 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">
        Breadcrumb
      </a>
    </li>
  </ol>
</nav>
1
2
3
4
5
6
7
render(UI::Breadcrumb.new(max_items: 3, collapse_at: :start)) do |bc|
  bc.with_item(href: "#", text: "Learn")
  bc.with_item(href: "#", text: "Tutorials")
  bc.with_item(href: "#", text: "Get Started")
  bc.with_item(href: "#", text: "Components")
  bc.with_item(href: "#", text: "Breadcrumb")
end

Auto-ellipsis with collapse_at: :start. Keeps the last segments.

No params configured.