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 like daisyUI? tweet about it!

Support daisyUI's development: Open Collective

Menu