Navbar

1
Navbar :base_100, class: "shadow-xl rounded-box" do
2
  Button :ghost, class: "text-xl" do
3
    "daisyUI"
4
  end
5
end

1
Navbar :base_100, class: "shadow-xl rounded-box" do |navbar|
2
  navbar.start do
3
    Button :ghost, class: "text-xl" do
4
      "daisyUI"
5
    end
6
  end
7
8
  navbar.end do
9
    Button :square, :ghost do
10
      three_dots_svg
11
    end
12
  end
13
end

1
Navbar :base_100, class: "shadow-xl rounded-box" do |navbar|
2
  navbar.start do
3
    Button :square, :ghost do
4
      hamburger_svg
5
    end
6
    Button :ghost, class: "text-xl" do
7
      "daisyUI"
8
    end
9
  end
10
11
  navbar.end do
12
    Button :square, :ghost do
13
      three_dots_svg
14
    end
15
  end
16
end

1
Navbar :base_100, class: "shadow-xl rounded-box" do |navbar|
2
  navbar.start do
3
    Button :ghost, class: "text-xl" do
4
      "daisyUI"
5
    end
6
  end
7
8
  navbar.end do
9
    Menu :horizontal, class: "px-1" do |menu|
10
      menu.item do
11
        Link do
12
          "Link"
13
        end
14
      end
15
16
      menu.item do |item|
17
        item.submenu(
18
          :collapsible,
19
          :base_100,
20
          class: "rounded-t-none p-2"
21
        ) do |submenu|
22
          submenu.title do
23
            Link do
24
              "Parent"
25
            end
26
          end
27
28
          submenu.item do
29
            Link do
30
              "Link 1"
31
            end
32
          end
33
          submenu.item do
34
            Link do
35
              "Link 2"
36
            end
37
          end
38
        end
39
      end
40
    end
41
  end
42
end

1
Navbar :base_100, class: "shadow-xl rounded-box" do |navbar|
2
  navbar.start do
3
    Button :ghost, class: "text-xl" do
4
      "daisyUI"
5
    end
6
  end
7
8
  navbar.end class: "gap-2" do
9
    FormControl do
10
      input type: "text", placeholder: "Search", class: "input input-bordered w-24 md:w-auto"
11
    end
12
13
    Dropdown :end do |dropdown|
14
      dropdown.button :ghost, :circle, class: "avatar" do
15
        div class: "w-10 rounded-full" do
16
          img src:, alt: "Tailwind CSS Navbar component"
17
        end
18
      end
19
20
      dropdown.menu :base_100, :sm, class: "rounded-box z-[1] mt-3 w-52 p-2 shadow" do |menu|
21
        menu.item do
22
          Link class: "justify-between" do
23
            plain "Profile"
24
            Badge :secondary do
25
              "New"
26
            end
27
          end
28
        end
29
        menu.item do
30
          Link do
31
            "Settings"
32
          end
33
        end
34
        menu.item do
35
          Link do
36
            "Logout"
37
          end
38
        end
39
      end
40
    end
41
  end
42
end