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
<div class="" >
  <h3 class="px-4 text-xs font-semibold uppercase tracking-wider text-primary-200">Main</h3>
  <div class="mt-2 space-y-1">
    <a href="#" class="flex items-center px-4 py-2 rounded-md transition-colors bg-white/20 text-white">
      <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-primary-100 hover:bg-white/10">
      <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-primary-100 hover:bg-white/10">
      <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='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'></path></svg>
      </span>
      <span>Team</span>
    </a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Drawer::NavGroupComponent.new(title: "Main", variant: :primary) 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: "Team", href: "#") do |item|
    item.with_icon { team_icon }
  end
end

No notes provided.

No params configured.