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
<div class="max-w-2xl"><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="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="Projects" data-breadcrumb-href="#" data-breadcrumb-avatar="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s"> <a data-breadcrumb-text="Projects" data-breadcrumb-href="#" data-breadcrumb-avatar="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s" 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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9Y9w-vhwNHxfSOZWSDFJ-9iPU8EPY0GR47A&s" /></span> 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="Dashboard" data-breadcrumb-href="#"> <a 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 max-w-32 truncate text-xs text-muted-foreground font-normal justify-start rounded"> Dashboard </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="#" data-last="true"> <a aria-current="page" 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 text-xs text-foreground font-normal justify-start rounded"> Settings </a> </li> </ol></nav></div>1
2
3
4
5
6
7
8
<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>No notes provided.
No params configured.