Breadcrumbs

A navigation trail showing the user's location in the hierarchy. DaisyUI adds › separators between <li> items via CSS — no extra markup needed.

Basic

Three levels with anchor links. The last item is the current page (plain text, no link).

With icons

Place an SVG icon before the link text inside each <li>.

Max-width with overflow

DaisyUI clips breadcrumbs with an ellipsis when constrained. Resize the window to see truncation in action.

Sizes

Control size via Tailwind text utilities on classes.

In a page header

Common pattern: breadcrumbs above a page title.

Single item

A breadcrumb with only one item renders without a separator.