Navbar and menu
A navbar is the site header: a bar at the top of the page with a logo, links and buttons. A menu is a list of links. They are usually used together: the menu sits inside the navbar, and in the dashboard it sits on the side.
The navbar
The navbar component splits the bar into three parts: navbar-start sticks to the left, navbar-center stays in the middle, navbar-end sticks to the right.
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="navbar bg-base-100 shadow-sm">
<div class="navbar-start">
<a href="#" class="btn btn-ghost text-xl">LearnUp</a>
</div>
<div class="navbar-end">
<a href="#login" class="btn btn-primary">Log in</a>
</div>
</div>A white bar with a shadow: the name on the left, a "Log in" button on the right. The logo is styled as btn btn-ghost — the background appears only on hover.
A horizontal menu
A menu is a <ul class="menu"> list where each item is an <li> with a link. The menu-horizontal modifier lines the items up in a row, so the menu can go in the middle of the navbar:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="navbar bg-base-100 shadow-sm">
<div class="navbar-start">
<a href="#" class="btn btn-ghost text-xl">LearnUp</a>
</div>
<div class="navbar-center">
<ul class="menu menu-horizontal">
<li><a href="#courses">Courses</a></li>
<li><a href="#prices">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="navbar-end">
<a href="#login" class="btn btn-primary">Log in</a>
</div>
</div>Three links appeared between the name and the button; an item gets a background on hover. Hiding such a menu on phones is covered in the responsive layout lesson.
A vertical menu
Without menu-horizontal the menu is vertical — this is how it goes into a sidebar. menu-title makes a group label, and menu-active highlights the current item:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<ul class="menu w-56 rounded-box bg-base-200">
<li class="menu-title">Learning</li>
<li><a href="#dashboard" class="menu-active">Home</a></li>
<li><a href="#my-courses">My courses</a></li>
<li><a href="#certificates">Certificates</a></li>
<li class="menu-title">Account</li>
<li><a href="#settings">Settings</a></li>
</ul>A grey panel with two groups of links; the "Home" item is filled with a dark color as the current one.
Nested items
A submenu uses the <details> and <summary> tags — the item expands on click with no JavaScript:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<ul class="menu w-56 rounded-box bg-base-200">
<li>
<details open>
<summary>HTML basics</summary>
<ul>
<li><a href="#lesson-1">Tags</a></li>
<li><a href="#lesson-2">Links</a></li>
</ul>
</details>
</li>
</ul>A course with an arrow and two lessons under it; clicking the name collapses the list. The open attribute makes it expanded from the start.
Common mistake
Putting links straight into <ul class="menu"> without <li>:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<ul class="menu w-56 bg-base-200">
<a href="#dashboard">Home</a>
<a href="#my-courses">My courses</a>
</ul>The links are squeezed together with no padding and do not highlight on hover: daisyUI item styles are tied to <li>. Wrap every menu item in an <li>.