Navbar

A horizontal app bar built with DaisyUI's navbar class. Three named slots — start, center, end — map to navbar-start, navbar-center, and navbar-end. Any slot can be omitted.

Brand only

Minimal navbar — just a brand name in the start slot.

navbar brand

Brand + links

Brand on the left, navigation links on the right.

navbar brand links

Center title

Brand centered, utility buttons on each end.

navbar center

With dropdown menu

Hamburger icon on mobile opening a DaisyUI dropdown with a Menu inside.

navbar dropdown

Colored

Apply semantic background colors via the classes prop.

navbar colors

Sticky

Wrap in a container with sticky top-0 z-50 to pin the navbar to the viewport top while scrolling.

navbar sticky

Scroll content line 1 — the navbar above stays fixed.

Scroll content line 2 — the navbar above stays fixed.

Scroll content line 3 — the navbar above stays fixed.

Scroll content line 4 — the navbar above stays fixed.

Scroll content line 5 — the navbar above stays fixed.

Scroll content line 6 — the navbar above stays fixed.

Scroll content line 7 — the navbar above stays fixed.

Scroll content line 8 — the navbar above stays fixed.