Menu

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

Class name
Type
menuComponent Container <ul> element
menu-titleComponent Specifies the title of menu
disabled
Modifier
Sets <li> as disabled
active
Modifier
Applies actives style to the element inside <li>
focus
Modifier
Applies focus style to the element inside <li>
menu-dropdown-toggleComponent Class name for the toggle to show/hide the `menu-dropdown` using JS
menu-dropdownComponent Class name for the collapsible <ul> if you want to show it using JS
menu-dropdown-show
Modifier
Shows the `menu-dropdown-toggle` and `menu-dropdown` collapsible submenu using JS
menu-xs
Responsive
Extra small size
menu-sm
Responsive
Small size
menu-md
Responsive
Medium size (default)
menu-lg
Responsive
Large size
menu-vertical
Responsive
Vertical menu (default)
menu-horizontal
Responsive
Horizontal menu
# Responsive: vertical on small screen, horizontal on large screen
# Collapsible submenu
# Collapsible submenu that works with class names
you can open/close the submenu by adding/removing `menu-dropdown-show` class using JS
# File tree
# Horizontal menu
# Horizontal submenu
# Mega menu with submenu (responsive)
# Collapsible with submenu (responsive)
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
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details