Dock

A bottom app bar / mobile navigation bar. Built with DaisyUI's dock class. Each child <button> or <a> becomes a dock item. Mark the active item with the active attribute or class="dock-active". Add a <span class="dock-label"> for visible labels.

Basic (icons only)

Three items, middle one active.

With labels

Add <span class="dock-label"> inside each item to show text beneath the icon.

Sizes

Five sizes — xs through xl.

As links

Use <a> tags instead of <button> for anchor-based navigation.

Mobile context

The dock is designed to sit at the very bottom of a mobile viewport. Here it's shown inside a constrained card simulating a phone screen.