Modifier	DaisyUI class
:xs	menu-xs
:sm	menu-sm
:md	menu-md
:lg	menu-lg
:vertical	menu-vertical
:horizontal	menu-horizontal
:primary	bg-primary text-primary-content
:secondary	bg-secondary text-secondary-content
:accent	bg-accent text-accent-content
:neutral	bg-neutral text-neutral-content
:base_100	bg-base-100 text-base-content
:base_200	bg-base-200 text-base-content
:base_300	bg-base-300 text-base-content
:info	bg-info text-info-content
:success	bg-success text-success-content
:warning	bg-warning text-warning-content
:error	bg-error text-error-content

1 Menu :base_200, class: "rounded-box w-56" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

# Responsive: vertical on small screen, horizontal on large screen

1 Menu :base_200, :vertical, responsive: {lg: :horizontal}, class: "rounded-box" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

1 Menu :base_200, class: "rounded-box" do |menu|
2   menu.item do
3     a do
4       house_svg
5     end
6   end
7 
8   menu.item do
9     a do
10       info_svg
11     end
12   end
13 
14   menu.item do
15     a do
16       chart_svg
17     end
18   end
19 end

1 Menu :horizontal, :base_200, class: "rounded-box" do |menu|
2   menu.item do
3     a do
4       house_svg
5     end
6   end
7 
8   menu.item do
9     a do
10       info_svg
11     end
12   end
13 
14   menu.item do
15     a do
16       chart_svg
17     end
18   end
19 end

1 Menu :base_200, class: "rounded-box" do |menu|
2   menu.item do
3     Tooltip :right, tip: "Home" do
4       a do
5         house_svg
6       end
7     end
8   end
9 
10   menu.item do
11     Tooltip :right, tip: "Details" do
12       a do
13         info_svg
14       end
15     end
16   end
17 
18   menu.item do
19     Tooltip :right, tip: "Stats" do
20       a do
21         chart_svg
22       end
23     end
24   end
25 end

1 Menu :horizontal, :base_200, class: "rounded-box" do |menu|
2   menu.item do
3     Tooltip tip: "Home" do
4       a do
5         house_svg
6       end
7     end
8   end
9 
10   menu.item do
11     Tooltip tip: "Details" do
12       a do
13         info_svg
14       end
15     end
16   end
17 
18   menu.item do
19     Tooltip tip: "Stats" do
20       a do
21         chart_svg
22       end
23     end
24   end
25 end

1 Menu :xs, :base_200, class: "rounded-box w-56" do |menu|
2   menu.item do
3     a do
4       "xs item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "xs item 2"
11     end
12   end
13 end
14 
15 Menu :sm, :base_200, class: "rounded-box w-56" do |menu|
16   menu.item do
17     a do
18       "sm item 1"
19     end
20   end
21 
22   menu.item do
23     a do
24       "sm item 2"
25     end
26   end
27 end
28 
29 Menu :md, :base_200, class: "rounded-box w-56" do |menu|
30   menu.item do
31     a do
32       "md item 1"
33     end
34   end
35 
36   menu.item do
37     a do
38       "md item 2"
39     end
40   end
41 end
42 
43 Menu :lg, :base_200, class: "rounded-box w-56" do |menu|
44   menu.item do
45     a do
46       "lg item 1"
47     end
48   end
49 
50   menu.item do
51     a do
52       "lg item 2"
53     end
54   end
55 end

1 Menu :base_200, class: "rounded-box w-56" do |menu|
2   menu.item do
3     a do
4       "Enabled item"
5     end
6   end
7 
8   menu.item :disabled do
9     a do
10       "disabled item"
11     end
12   end
13 
14   menu.item :disabled do
15     a do
16       "disabled item"
17     end
18   end
19 end

# With icons component

1 Menu :base_200, class: "rounded-box w-56" do |menu|
2   menu.item do
3     a do
4       house_svg
5       plain "Item 1"
6     end
7   end
8 
9   menu.item do
10     a do
11       info_svg
12       plain "Item 2"
13     end
14   end
15 
16   menu.item do
17     a do
18       chart_svg
19       plain "Item 3"
20     end
21   end
22 end

1 Menu :base_200, responsive: {lg: :horizontal}, class: "rounded-box flex-nowrap" do |menu|
2   menu.item do
3     a do
4       house_svg
5       plain "Inbox"
6       Badge :sm do
7         "99+"
8       end
9     end
10   end
11 
12   menu.item do
13     a do
14       info_svg
15       plain "Updates"
16       Badge :sm, :warning do
17         "NEW"
18       end
19     end
20   end
21 
22   menu.item do
23     a do
24       plain "Stats"
25       Badge :xs, :info
26     end
27   end
28 end

1 Menu :base_200, class: "w-56 p-0 [&_li>*]:rounded-none" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

1 Menu :base_200, class: "w-56" do |menu|
2   menu.title do
3     "Title"
4   end
5 
6   menu.item do
7     a do
8       "Item 1"
9     end
10   end
11 
12   menu.item do
13     a do
14       "Item 2"
15     end
16   end
17 
18   menu.item do
19     a do
20       "Item 3"
21     end
22   end
23 end

1 Menu :base_200, class: "w-56" do |menu|
2   menu.item do |item|
3     item.title do
4       "Title"
5     end
6 
7     item.submenu do |submenu|
8       submenu.item do
9         a do
10           "Item 1"
11         end
12       end
13 
14       submenu.item do
15         a do
16           "Item 2"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Item 3"
23         end
24       end
25     end
26   end
27 end

# Submenu

1 Menu :base_200, class: "w-56" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do |item|
9     a do
10       "Parent as link"
11     end
12 
13     item.submenu do |submenu|
14       submenu.item do
15         a do
16           "Submenu 1"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Submenu 2"
23         end
24       end
25 
26       submenu.item do |item|
27         item.title do
28           "Parent as title"
29         end
30 
31         item.submenu do |submenu|
32           submenu.item do
33             a do
34               "Submenu 1"
35             end
36           end
37 
38           submenu.item do
39             a do
40               "Submenu 2"
41             end
42           end
43         end
44       end
45     end
46   end
47 
48   menu.item do
49     a do
50       "Item 3"
51     end
52   end
53 end

# Combined

1 Menu class: "bg-base-200 w-52" do |menu|
2   menu.title do
3     "My Menu"
4   end
5 
6   menu.item :disabled do
7     a do
8       "Item 1"
9     end
10   end
11 
12   menu.item do |item|
13     item.submenu :collapsible, :open do |submenu|
14       submenu.title do
15         "Parent 1"
16       end
17 
18       submenu.item do |submenu_item|
19         a do
20           "Child 1"
21         end
22       end
23 
24       submenu.item do |submenu_item|
25         submenu_item.submenu :collapsible do |submenu_2|
26           submenu_2.title do
27             "Parent 2"
28           end
29 
30           submenu_2.item do
31             a do
32               "Child 2"
33             end
34           end
35         end
36       end
37 
38       submenu.item do |submenu_item|
39         submenu_item.submenu do |submenu_2|
40           submenu_2.title do
41             "Parent 3"
42           end
43 
44           submenu_2.item do
45             a do
46               "Child 3"
47             end
48           end
49         end
50       end
51     end
52   end
53 
54   menu.item do |item|
55     item.submenu do |submenu|
56       submenu.title do
57         "Parent 1"
58       end
59 
60       submenu.item do
61         a do
62           "Child 1"
63         end
64       end
65 
66       submenu.item do |item|
67         item.submenu do |submenu_2|
68           submenu_2.title do
69             "Parent 2"
70           end
71 
72           submenu_2.item do
73             a do
74               "Child 2"
75             end
76           end
77         end
78       end
79     end
80   end
81 end

# Collapsible submenu

1 Menu :base_200, class: "rounded-box w-56" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do |item|
9     item.submenu :collapsible, :open do |submenu|
10       submenu.title do
11         "Parent"
12       end
13 
14       submenu.item do
15         a do
16           "Submenu 1"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Submenu 2"
23         end
24       end
25 
26       submenu.item do |submenu_item|
27         submenu_item.submenu :collapsible, :open do |submenu_2|
28           submenu_2.title do
29             "Parent"
30           end
31 
32           submenu_2.item do
33             a do
34               "Submenu 1"
35             end
36           end
37 
38           submenu_2.item do
39             a do
40               "Submenu 2"
41             end
42           end
43         end
44       end
45     end
46   end
47 end

# File tree

1 Menu :base_200, :xs, class: "rounded-lg w-full max-w-xs" do |menu|
2   menu.item do
3     a do
4       blank_file_svg
5       plain "resume.pdf"
6     end
7   end
8 
9   menu.item do |item|
10     item.submenu :collapsible, :open do |submenu|
11       submenu.title do
12         folder_svg
13         plain "My Files"
14       end
15 
16       submenu.item do
17         a do
18           blank_file_svg
19           plain "Project-final.psd"
20         end
21       end
22 
23       submenu.item do
24         a do
25           blank_file_svg
26           plain "Project-final-2.psd"
27         end
28       end
29 
30       submenu.item do |submenu_item|
31         submenu_item.submenu :collapsible, :open do |submenu_2|
32           submenu_2.title do
33             folder_svg
34             plain "Images"
35           end
36 
37           submenu_2.item do
38             a do
39               image_svg
40               plain "Screenshot1.png"
41             end
42           end
43 
44           submenu_2.item do
45             a do
46               image_svg
47               plain "Screenshot2.png"
48             end
49           end
50 
51           submenu_2.item do |submenu_item|
52             submenu_item.submenu :collapsible do |submenu_3|
53               submenu_3.title do
54                 folder_svg
55                 plain "Others"
56               end
57 
58               submenu_3.item do
59                 a do
60                   image_svg
61                   plain "Screenshot3.png"
62                 end
63               end
64             end
65           end
66         end
67       end
68     end
69   end
70 
71   menu.item do
72     a do
73       blank_file_svg
74       plain "reports-final-2.pdf"
75     end
76   end
77 end

# With active item

1 Menu :base_200, class: "w-56" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     Link :active do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

1 Menu :horizontal, :base_200 do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

# Horizontal submenu

1 Menu :horizontal, :base_200 do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do |item|
9     a do
10       "Parent"
11     end
12 
13     item.submenu do |submenu|
14       submenu.item do
15         a do
16           "Submenu 1"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Submenu 2"
23         end
24       end
25     end
26   end
27 
28   menu.item do
29     a do
30       "Item 3"
31     end
32   end
33 end

1 Menu :base_200, responsive: {lg: :horizontal}, class: "rounded-box lg:min-w-max" do |menu|
2   menu.item do |item|
3     a do
4       "Solutions"
5     end
6 
7     item.submenu do |submenu|
8       submenu.item do
9         a do
10           "Design"
11         end
12       end
13 
14       submenu.item do
15         a do
16           "Development"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Hosting"
23         end
24       end
25 
26       submenu.item do
27         a do
28           "Domain register"
29         end
30       end
31     end
32   end
33 
34   menu.item do |item|
35     a do
36       "Enterprise"
37     end
38 
39     item.submenu do |submenu|
40       submenu.item do
41         a do
42           "CRM software"
43         end
44       end
45 
46       submenu.item do
47         a do
48           "Marketing management"
49         end
50       end
51 
52       submenu.item do
53         a do
54           "Security"
55         end
56       end
57 
58       submenu.item do
59         a do
60           "Consulting"
61         end
62       end
63     end
64   end
65 
66   menu.item do |item|
67     a do
68       "Products"
69     end
70 
71     item.submenu do |submenu|
72       submenu.item do
73         a do
74           "UI Kit"
75         end
76       end
77 
78       submenu.item do
79         a do
80           "Wordpress themes"
81         end
82       end
83 
84       submenu.item do
85         a do
86           "Wordpress plugins"
87         end
88       end
89 
90       submenu.item do |submenu_item|
91         a do
92           "Open source"
93         end
94 
95         submenu_item.submenu do |submenu|
96           submenu.item do
97             a do
98               "Auth management system"
99             end
100           end
101 
102           submenu.item do
103             a do
104               "VScode theme"
105             end
106           end
107 
108           submenu.item do
109             a do
110               "Color picker app"
111             end
112           end
113         end
114       end
115     end
116   end
117 
118   menu.item do |item|
119     a do
120       "Company"
121     end
122 
123     item.submenu do |submenu|
124       submenu.item do
125         a do
126           "About us"
127         end
128       end
129 
130       submenu.item do
131         a do
132           "Contact us"
133         end
134       end
135 
136       submenu.item do
137         a do
138           "Privacy policy"
139         end
140       end
141 
142       submenu.item do
143         a do
144           "Press kit"
145         end
146       end
147     end
148   end
149 end

# Collapsible with submenu (responsive)

1 Menu :base_200, responsive: {lg: :horizontal}, class: "rounded-box lg:mb-64" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do |item|
9     item.submenu :collapsible, :open do |submenu|
10       submenu.title do
11         "Parent item"
12       end
13 
14       submenu.item do
15         a do
16           "Submenu 1"
17         end
18       end
19 
20       submenu.item do
21         a do
22           "Submenu 2"
23         end
24       end
25 
26       submenu.item do |submenu_item|
27         submenu_item.submenu :collapsible, :open do |submenu_2|
28           submenu_2.title do
29             "Parent"
30           end
31 
32           submenu_2.item do
33             a do
34               "item 1"
35             end
36           end
37 
38           submenu_2.item do
39             a do
40               "item 2"
41             end
42           end
43         end
44       end
45     end
46   end
47 
48   menu.item do
49     a do
50       "Item 3"
51     end
52   end
53 end

1 Menu :base_200, class: "w-56 p-0 [&_li>*]:rounded-none" do |menu|
2   menu.item do
3     a do
4       "Item 1"
5     end
6   end
7 
8   menu.item do
9     a do
10       "Item 2"
11     end
12   end
13 
14   menu.item do
15     a do
16       "Item 3"
17     end
18   end
19 end

Menu

# Menu

# Responsive: vertical on small screen, horizontal on large screen

# Menu with icon only

# Menu with icon only (horizontal)

# Menu with icon only with tooltip

# Menu with icon only (horizontal) with tooltip

# Menu sizes

# Menu with disabled items

# With icons component

# Menu with icons and badge (responsive)

# Menu without padding and border radius

# Menu with title

# Menu with title as a parent

Title

# Submenu

Parent as title

# Combined

# Collapsible submenu

# File tree

# With active item

# Horizontal menu

# Horizontal submenu

# Mega menu with submenu (responsive)

# Collapsible with submenu (responsive)

# Menu without padding and border radius

1	Menu :base_200, class: "rounded-box w-56" do \|menu\|
2	menu.item do
3	a do
4	"Item 1"
5	end
6	end
7
8	menu.item do
9	a do
10	"Item 2"
11	end
12	end
13
14	menu.item do
15	a do
16	"Item 3"
17	end
18	end
19	end

1	Menu :base_200, :vertical, responsive: {lg: :horizontal}, class: "rounded-box" do \|menu\|
2	menu.item do
3	a do
4	"Item 1"
5	end
6	end
7
8	menu.item do
9	a do
10	"Item 2"
11	end
12	end
13
14	menu.item do
15	a do
16	"Item 3"
17	end
18	end
19	end

1	Menu :base_200, class: "rounded-box" do \|menu\|
2	menu.item do
3	a do
4	house_svg
5	end
6	end
7
8	menu.item do
9	a do
10	info_svg
11	end
12	end
13
14	menu.item do
15	a do
16	chart_svg
17	end
18	end
19	end

1	Menu :horizontal, :base_200, class: "rounded-box" do \|menu\|
2	menu.item do
3	a do
4	house_svg
5	end
6	end
7
8	menu.item do
9	a do
10	info_svg
11	end
12	end
13
14	menu.item do
15	a do
16	chart_svg
17	end
18	end
19	end

1	Menu :base_200, class: "rounded-box" do \|menu\|
2	menu.item do
3	Tooltip :right, tip: "Home" do
4	a do
5	house_svg
6	end
7	end
8	end
9
10	menu.item do
11	Tooltip :right, tip: "Details" do
12	a do
13	info_svg
14	end
15	end
16	end
17
18	menu.item do
19	Tooltip :right, tip: "Stats" do
20	a do
21	chart_svg
22	end
23	end
24	end
25	end

1	Menu :horizontal, :base_200, class: "rounded-box" do \|menu\|
2	menu.item do
3	Tooltip tip: "Home" do
4	a do
5	house_svg
6	end
7	end
8	end
9
10	menu.item do
11	Tooltip tip: "Details" do
12	a do
13	info_svg
14	end
15	end
16	end
17
18	menu.item do
19	Tooltip tip: "Stats" do
20	a do
21	chart_svg
22	end
23	end
24	end
25	end

1	Menu :xs, :base_200, class: "rounded-box w-56" do \|menu\|
2	menu.item do
3	a do
4	"xs item 1"
5	end
6	end
7
8	menu.item do
9	a do
10	"xs item 2"
11	end
12	end
13	end
14
15	Menu :sm, :base_200, class: "rounded-box w-56" do \|menu\|
16	menu.item do
17	a do
18	"sm item 1"
19	end
20	end
21
22	menu.item do
23	a do
24	"sm item 2"
25	end
26	end
27	end
28
29	Menu :md, :base_200, class: "rounded-box w-56" do \|menu\|
30	menu.item do
31	a do
32	"md item 1"
33	end
34	end
35
36	menu.item do
37	a do
38	"md item 2"
39	end
40	end
41	end
42
43	Menu :lg, :base_200, class: "rounded-box w-56" do \|menu\|
44	menu.item do
45	a do
46	"lg item 1"
47	end
48	end
49
50	menu.item do
51	a do
52	"lg item 2"
53	end
54	end
55	end

1	Menu :base_200, responsive: {lg: :horizontal}, class: "rounded-box flex-nowrap" do \|menu\|
2	menu.item do
3	a do
4	house_svg
5	plain "Inbox"
6	Badge :sm do
7	"99+"
8	end
9	end
10	end
11
12	menu.item do
13	a do
14	info_svg
15	plain "Updates"
16	Badge :sm, :warning do
17	"NEW"
18	end
19	end
20	end
21
22	menu.item do
23	a do
24	plain "Stats"
25	Badge :xs, :info
26	end
27	end
28	end

1	Menu :base_200, class: "w-56 p-0 [&_li>*]:rounded-none" do \|menu\|
2	menu.item do
3	a do
4	"Item 1"
5	end
6	end
7
8	menu.item do
9	a do
10	"Item 2"
11	end
12	end
13
14	menu.item do
15	a do
16	"Item 3"
17	end
18	end
19	end

1	Menu :base_200, class: "w-56" do \|menu\|
2	menu.title do
3	"Title"
4	end
5
6	menu.item do
7	a do
8	"Item 1"
9	end
10	end
11
12	menu.item do
13	a do
14	"Item 2"
15	end
16	end
17
18	menu.item do
19	a do
20	"Item 3"
21	end
22	end
23	end

1	Menu :base_200, class: "w-56" do \|menu\|
2	menu.item do \|item\|
3	item.title do
4	"Title"
5	end
6
7	item.submenu do \|submenu\|
8	submenu.item do
9	a do
10	"Item 1"
11	end
12	end
13
14	submenu.item do
15	a do
16	"Item 2"
17	end
18	end
19
20	submenu.item do
21	a do
22	"Item 3"
23	end
24	end
25	end
26	end
27	end

1	Menu class: "bg-base-200 w-52" do \|menu\|
2	menu.title do
3	"My Menu"
4	end
5
6	menu.item :disabled do
7	a do
8	"Item 1"
9	end
10	end
11
12	menu.item do \|item\|
13	item.submenu :collapsible, :open do \|submenu\|
14	submenu.title do
15	"Parent 1"
16	end
17
18	submenu.item do \|submenu_item\|
19	a do
20	"Child 1"
21	end
22	end
23
24	submenu.item do \|submenu_item\|
25	submenu_item.submenu :collapsible do \|submenu_2\|
26	submenu_2.title do
27	"Parent 2"
28	end
29
30	submenu_2.item do
31	a do
32	"Child 2"
33	end
34	end
35	end
36	end
37
38	submenu.item do \|submenu_item\|
39	submenu_item.submenu do \|submenu_2\|
40	submenu_2.title do
41	"Parent 3"
42	end
43
44	submenu_2.item do
45	a do
46	"Child 3"
47	end
48	end
49	end
50	end
51	end
52	end
53
54	menu.item do \|item\|
55	item.submenu do \|submenu\|
56	submenu.title do
57	"Parent 1"
58	end
59
60	submenu.item do
61	a do
62	"Child 1"
63	end
64	end
65
66	submenu.item do \|item\|
67	item.submenu do \|submenu_2\|
68	submenu_2.title do
69	"Parent 2"
70	end
71
72	submenu_2.item do
73	a do
74	"Child 2"
75	end
76	end
77	end
78	end
79	end
80	end
81	end

1	Menu :base_200, :xs, class: "rounded-lg w-full max-w-xs" do \|menu\|
2	menu.item do
3	a do
4	blank_file_svg
5	plain "resume.pdf"
6	end
7	end
8
9	menu.item do \|item\|
10	item.submenu :collapsible, :open do \|submenu\|
11	submenu.title do
12	folder_svg
13	plain "My Files"
14	end
15
16	submenu.item do
17	a do
18	blank_file_svg
19	plain "Project-final.psd"
20	end
21	end
22
23	submenu.item do
24	a do
25	blank_file_svg
26	plain "Project-final-2.psd"
27	end
28	end
29
30	submenu.item do \|submenu_item\|
31	submenu_item.submenu :collapsible, :open do \|submenu_2\|
32	submenu_2.title do
33	folder_svg
34	plain "Images"
35	end
36
37	submenu_2.item do
38	a do
39	image_svg
40	plain "Screenshot1.png"
41	end
42	end
43
44	submenu_2.item do
45	a do
46	image_svg
47	plain "Screenshot2.png"
48	end
49	end
50
51	submenu_2.item do \|submenu_item\|
52	submenu_item.submenu :collapsible do \|submenu_3\|
53	submenu_3.title do
54	folder_svg
55	plain "Others"
56	end
57
58	submenu_3.item do
59	a do
60	image_svg
61	plain "Screenshot3.png"
62	end
63	end
64	end
65	end
66	end
67	end
68	end
69	end
70
71	menu.item do
72	a do
73	blank_file_svg
74	plain "reports-final-2.pdf"
75	end
76	end
77	end

1	Menu :horizontal, :base_200 do \|menu\|
2	menu.item do
3	a do
4	"Item 1"
5	end
6	end
7
8	menu.item do
9	a do
10	"Item 2"
11	end
12	end
13
14	menu.item do
15	a do
16	"Item 3"
17	end
18	end
19	end