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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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> <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="Projects" data-breadcrumb-href="#"> <a data-breadcrumb-text="Projects" 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"> Projects </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="#" data-breadcrumb-avatar="/icon.png"> <a data-breadcrumb-text="Website" data-breadcrumb-href="#" data-breadcrumb-avatar="/icon.png" 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"> <span class="relative flex shrink-0 overflow-hidden h-4 w-4 text-xs bg-muted text-foreground/70 rounded border" data-slot="avatar"><img alt="" class="aspect-square h-full w-full object-cover" src="/icon.png" /></span> 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="Dashboard" data-breadcrumb-href="#" data-last="true"> <a aria-current="page" data-breadcrumb-text="Dashboard" 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"> Dashboard </a> </li> </ol> </nav> </div> <div> <h3 class="text-sm font-medium mb-2">Compound API — ellipsis in middle</h3> <nav aria-label="Breadcrumb" class="text-xs"> <ol class="flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5"> <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 rounded"> <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 underline-offset-4 hover:underline text-xs text-muted-foreground max-w-32 truncate font-normal justify-start rounded-sm">Handbook</a> </li> <li role="presentation"><span class="text-muted-foreground/70" aria-hidden="true">/</span></li> <li class="inline-flex items-center gap-1.5"> <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-9d1eb8c2" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-9d1eb8c2" 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-9d1eb8c2" 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"> <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 underline-offset-4 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</a> <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 underline-offset-4 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</a> <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 underline-offset-4 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</a> </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" aria-hidden="true">/</span></li> <li class="inline-flex items-center gap-1.5 rounded"> <a aria-current="page" 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-sm">Cloud providers</a> </li> </ol> </ol> </nav> </div> <div> <h3 class="text-sm font-medium mb-2">Compound API — ellipsis at start</h3> <nav aria-label="Breadcrumb" class="text-xs"> <ol class="flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5"> <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"> <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-533707fc" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-533707fc" 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-533707fc" 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"> <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 underline-offset-4 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</a> <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 underline-offset-4 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</a> </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" aria-hidden="true">/</span></li> <li class="inline-flex items-center gap-1.5 rounded"> <a aria-current="page" 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-sm">Getting Started</a> </li> </ol> </ol> </nav> </div></div>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
43
44
45
46
47
48
49
50
<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>Manual ellipsis slot (deprecated — use maxitems + collapseat instead)
No params configured.