Menu
| 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 |
# Menu
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
# Menu with icon only
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
# Menu with icon only (horizontal)
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
# Menu with icon only with tooltip
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
# Menu with icon only (horizontal) with tooltip
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
# Menu sizes
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
# Menu with disabled items
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
# Menu with icons and badge (responsive)
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
# Menu without padding and border radius
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 with title
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
# Menu with title as a parent
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
# Horizontal menu
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
# Mega menu with submenu (responsive)
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
# Menu without padding and border radius
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