Menu

Menu is used to display a list of links vertically or horizontally.

Class name
Type
menu Component Container <ul> element
menu-title Component Identify <li> as the title of menu
disabled
Modifier
Sets <li> as disabled
active
Modifier
highlights the element inside <li> as active
bordered
Modifier
adds a border to the <li>
hover-bordered
Modifier
adds a border to the <li> when hovered
menu-normal
Responsive
Normal text size and normal spacing (default)
menu-compact
Responsive
Smaller text size and compact spacing
menu-vertical
Responsive
Vertical menu (default)
menu-horizontal
Responsive
Horizontal menu
# Item with border
# Item with border (on hover)
# Disabled items
# Compact
# Responsive (compact by default, normal on large screen)
# Horizontal
# Responsive (vertical by default, horizontal on large screen)
# With icons
# Only icons
# Only icons (horizontal)
# Icons with padding
# Horizontal with submenu
# Horizontal with submenu and padding and border radius
# Vertical with submenu
# Vertical with submenu and padding and border radius
# A lot of submenus
The second level will be a dropdown and after that, to avoid a bad UX all levels will be visible with a padding.
# With custom color
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective