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
57
58
59
60
61
62
<div class="p-6 space-y-8">
  <div>
    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Home Icon</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">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
            Home
          </a>
        </li>
        <li class="inline-flex items-center">
          <span class="mx-2 text-grayscale-400" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg></span>
          <a href="#" class="text-grayscale-600 hover:text-grayscale-900 inline-flex items-center gap-1 transition-colors">
            Projects
          </a>
        </li>
        <li class="inline-flex items-center">
          <span class="mx-2 text-grayscale-400" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg></span>
          <span class="text-grayscale-500 font-medium inline-flex items-center gap-1" aria-current="page">
            Project Alpha
          </span>
        </li>
      </ol>
    </nav>
  </div>
  <div>
    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Icons on Multiple Items</h3>
    <nav aria-label="Breadcrumb" class="">
      <ol class="flex items-center flex-wrap gap-1 text-lg">
        <li class="inline-flex items-center">
          <a href="#" class="text-grayscale-600 hover:text-grayscale-900 inline-flex items-center gap-1 transition-colors">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
            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">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
            </svg>
            Settings
          </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">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
            </svg>
            Profile
          </span>
        </li>
      </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
<div class="p-6 space-y-8">
  <div>
    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Home Icon</h3>
    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :chevron) do |breadcrumb| %>
      <% breadcrumb.with_item(label: "Home", href: "#") do |item| %>
        <% item.with_icon_before do %>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
          </svg>
        <% end %>
      <% end %>
      <% breadcrumb.with_item(label: "Projects", href: "#") %>
      <% breadcrumb.with_item(label: "Project Alpha") %>
    <% end %>
  </div>
  <div>
    <h3 class="text-lg font-semibold text-grayscale-900 mb-2">With Icons on Multiple Items</h3>
    <%= render BetterUi::Breadcrumb::BreadcrumbComponent.new(separator: :slash, size: :lg) do |breadcrumb| %>
      <% breadcrumb.with_item(label: "Home", href: "#") do |item| %>
        <% item.with_icon_before do %>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
          </svg>
        <% end %>
      <% end %>
      <% breadcrumb.with_item(label: "Settings", href: "#") do |item| %>
        <% item.with_icon_before do %>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
          </svg>
        <% end %>
      <% end %>
      <% breadcrumb.with_item(label: "Profile") do |item| %>
        <% item.with_icon_before do %>
          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
        <% end %>
      <% end %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.