BetterUi Components

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="">
  <ol class="flex items-center flex-wrap gap-1 text-base">
    <li class="inline-flex items-center">
      <a href="#" class="text-grayscale-600 hover:text-grayscale-900 inline-flex items-center gap-1 transition-colors">
        Home
      </a>
    </li>
    <li class="inline-flex items-center">
      <span class="mx-2 text-grayscale-400" aria-hidden="true">/</span>
      <a href="#" class="text-grayscale-600 hover:text-grayscale-900 inline-flex items-center gap-1 transition-colors">
        Library
      </a>
    </li>
    <li class="inline-flex items-center">
      <span class="mx-2 text-grayscale-400" aria-hidden="true">/</span>
      <a href="#" class="text-grayscale-600 hover:text-grayscale-900 inline-flex items-center gap-1 transition-colors">
        Articles
      </a>
    </li>
    <li class="inline-flex items-center">
      <span class="mx-2 text-grayscale-400" aria-hidden="true">/</span>
      <span class="text-grayscale-500 font-medium inline-flex items-center gap-1" aria-current="page">
        Current Article
      </span>
    </li>
  </ol>
</nav>
1
2
3
4
5
6
7
8
9
render BetterUi::Breadcrumb::BreadcrumbComponent.new(
  separator: separator.to_sym,
  size: size.to_sym
) do |breadcrumb|
  breadcrumb.with_item(label: "Home", href: "#")
  breadcrumb.with_item(label: "Library", href: "#")
  breadcrumb.with_item(label: "Articles", href: "#")
  breadcrumb.with_item(label: "Current Article")
end

No notes provided.

Param Description Input

—

—