Menu

A vertical (or horizontal) list of navigation items. Built with DaisyUI's menu class on a <ul>. Items are plain <li><a> pairs; add active, disabled, or menu-title for states and section headers.

Basic

Simple vertical list with a background and rounded box.

Active and disabled

Use class="active" on the <a> for the current page, and class="disabled" to prevent interaction.

Section titles

Add class="menu-title" to an <li> to render a non-interactive section heading.

Nested submenu

Nest a <ul> directly inside an <li> to create a static submenu.

Collapsible submenu

Wrap in <details> + <summary> for a toggle-able submenu with no JavaScript required.

Horizontal

Pass horizontal to lay items out in a row — useful for top navigation bars.

Sizes

Five sizes — xs through xl.

With icons

Place an SVG icon before the label text inside the <a>.

With badges

Add a badge element at the end of an <a> to show counts or labels inline.

Sidebar navigation

Real-world pattern: a styled sidebar with grouped sections, icons, and a badge.