Lookbook Demo
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
<nav class="bg-gray-800" x-data="{open: false}">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false" @click="open = !open">
          <span class="sr-only">Open main menu</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" x-show="!open">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" x-show="open">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0 flex items-center">
          <span class="whitespace-nowrap font-bold text-2xl text-white uppercase">DEMO</span>
        </div>
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">
              Dashboard
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
              Users
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
              Articles
            </a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <img class="inline-block rounded-full avatar-sm" src="https://placekitten.com/200/200" alt="">
      </div>
    </div>
  </div>
  <div class="sm:hidden" id="mobile-menu" x-show="open">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
        Dashboard
      </a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
        Users
      </a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
        Articles
      </a>
    </div>
  </div>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= render Navigation::NavbarComponent.new(links: [
  {
    text: "Dashboard",
    href: "#",
    current: true
  },
  {
    text: "Users",
    href: "#"
  },
  {
    text: "Articles",
    href: "#"
  }
]) do |nav| %>
  <%= nav.with_avatar src: "https://placekitten.com/200/200" %>
<% end %>

This example uses a preview template, so the 'Source' tab will display the contents of the template file instead of the contents of the preview method.

A quick tip - this text itself is just a comment added above the appropriate preview method. You can use markdown in your comments too!

No params configured.

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

No assets to display.
Check out the button component preview to see an example with asset files.