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
<div class="" >
  <h3 class="px-4 text-xs font-semibold uppercase tracking-wider text-grayscale-500">Navigation</h3>
  <div class="mt-2 space-y-1">
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors bg-primary-50 text-primary-700">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'></path></svg>
      </span>
      <span>Dashboard</span>
    </a>
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors text-grayscale-700 hover:bg-grayscale-100">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'></path></svg>
      </span>
      <span>Projects</span>
    </a>
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors text-grayscale-700 hover:bg-grayscale-100">
      <span class="w-5 h-5 mr-3 shrink-0">
        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'></path></svg>
      </span>
      <span>Messages</span>
      <span class="ml-auto text-xs font-medium px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
        5
      </span>
    </a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render BetterUi::Drawer::NavGroupComponent.new(
  title: title.present? ? title : nil,
  variant: variant.to_sym
) do |group|
  group.with_item(label: "Dashboard", href: "#", active: true) do |item|
    item.with_icon { dashboard_icon }
  end
  group.with_item(label: "Projects", href: "#") do |item|
    item.with_icon { projects_icon }
  end
  group.with_item(label: "Messages", href: "#") do |item|
    item.with_icon { inbox_icon }
    item.with_badge { "5" }
  end
end

No notes provided.

Param Description Input

—

—