Dropdown

1
Dropdown :tap_to_close do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Open or close"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 2"
16
      end
17
    end
18
  end
19
end

1
Dropdown do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click to open"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 2"
16
      end
17
    end
18
  end
19
end

1
Dropdown :end do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :top do |dropdown|
2
  dropdown.button :primary, class: "mt-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :top, :end do |dropdown|
2
  dropdown.button :primary, class: "mt-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :bottom do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :bottom, :end do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :left do |dropdown|
2
  dropdown.button :primary, class: "ml-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :left, :end do |dropdown|
2
  dropdown.button :primary, class: "ml-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :right do |dropdown|
2
  dropdown.button :primary, class: "mr-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :right, :end do |dropdown|
2
  dropdown.button :primary, class: "mr-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :hover do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown :open do |dropdown|
2
  dropdown.button :primary, class: "mb-1" do
3
    "Click"
4
  end
5
6
  dropdown.menu :base_100, class: "rounded-box w-52 shadow" do |menu|
7
    menu.item do
8
      a do
9
        "Item 1"
10
      end
11
    end
12
13
    menu.item do
14
      a do
15
        "Item 1"
16
      end
17
    end
18
  end
19
end

1
Dropdown do |dropdown|
2
  dropdown.button :primary, class: "m-1" do
3
    "Click"
4
  end
5
6
  dropdown.content :primary, as: Card, class: "w-64 p-2 shadow" do |card|
7
    card.body do
8
      h3 class: "card-title" do
9
        "Card title!"
10
      end
11
12
      p do
13
        "you can use any element as a dropdown."
14
      end
15
    end
16
  end
17
end

1
Navbar class: "bg-base-200 rounded-box" do |navbar|
2
  div class: "flex-1 px-2 lg:flex-none" do
3
    a class: "text-lg font-bold" do
4
      "daisyUI"
5
    end
6
  end
7
8
  div class: "flex flex-1 items-stretch justify-end px-2" do
9
    Dropdown :end do |dropdown|
10
      dropdown.button :ghost, :rounded do
11
        "Dropdown"
12
      end
13
14
      dropdown.menu :base_100, class: "rounded-box mt-4 w-52 p-2 shadow" do |menu|
15
        menu.item do
16
          a do
17
            "Item 1"
18
          end
19
        end
20
21
        menu.item do
22
          a do
23
            "Item 2"
24
          end
25
        end
26
      end
27
    end
28
  end
29
end

1
plain "A normal text and a helper dropdown"
2
3
Dropdown :end do |dropdown|
4
  dropdown.button :circle, :ghost, :xs, class: "text-info" do
5
    svg_info
6
  end
7
8
  dropdown.content :compact, :base_100, as: Card, class: "rounded-box w-64 shadow" do |card|
9
    card.body do
10
      card.title do
11
        "You needed more info?"
12
      end
13
14
      p do
15
        "Here is a description!"
16
      end
17
    end
18
  end
19
end