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
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
<div class="p-6 space-y-6">
  <h3 class="text-lg font-semibold text-grayscale-900">Default Breadcrumb</h3>
  <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">
          Products
        </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">
          Categories
        </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">
          Electronics
        </span>
      </li>
    </ol>
  </nav>
  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Single Item</h3>
  <nav aria-label="Breadcrumb" class="">
    <ol class="flex items-center flex-wrap gap-1 text-base">
      <li class="inline-flex items-center">
        <span class="text-grayscale-500 font-medium inline-flex items-center gap-1" aria-current="page">
          Home
        </span>
      </li>
    </ol>
  </nav>
  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Two Items</h3>
  <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>
        <span class="text-grayscale-500 font-medium inline-flex items-center gap-1" aria-current="page">
          Dashboard
        </span>
      </li>
    </ol>
  </nav>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="p-6 space-y-6">
  <h3 class="text-lg font-semibold text-grayscale-900">Default Breadcrumb</h3>
  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
    <% breadcrumb.with_item(label: "Home", href: "#") %>
    <% breadcrumb.with_item(label: "Products", href: "#") %>
    <% breadcrumb.with_item(label: "Categories", href: "#") %>
    <% breadcrumb.with_item(label: "Electronics") %>
  <% end %>
  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Single Item</h3>
  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
    <% breadcrumb.with_item(label: "Home") %>
  <% end %>
  <h3 class="text-lg font-semibold text-grayscale-900 mt-8">Two Items</h3>
  <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new do |breadcrumb| %>
    <% breadcrumb.with_item(label: "Home", href: "#") %>
    <% breadcrumb.with_item(label: "Dashboard") %>
  <% end %>
</div>

No notes provided.

No params configured.