Navigation and menu components including navbars, menus, breadcrumbs, tabs, and step indicators for building intuitive user interfaces.
Horizontal navigation bar with flexible layout options.
<!-- Basic navbar -->
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="navbar-end">
<a class="btn">Button</a>
</div>
</div>
<!-- Navbar with colors -->
<div class="navbar bg-primary text-primary-content">
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>
<div class="navbar bg-base-300">
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>Vertical and horizontal menu lists with various styling options.
<!-- Basic vertical menu -->
<ul class="menu bg-base-200 w-56 rounded-box">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
<!-- Menu with active state -->
<ul class="menu bg-base-200 w-56 rounded-box">
<li><a>Item 1</a></li>
<li><a class="active">Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
<!-- Menu with icons -->
<ul class="menu bg-base-200 w-56 rounded-box">
<li>
<a>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
</svg>
Item 1
</a>
</li>
<li>
<a>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
Item 2
</a>
</li>
</ul>
<!-- Horizontal menu -->
<ul class="menu menu-horizontal bg-base-200 rounded-box">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
<!-- Menu with submenu -->
<ul class="menu bg-base-200 w-56 rounded-box">
<li><a>Item 1</a></li>
<li>
<details open>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</details>
</li>
<li><a>Item 3</a></li>
</ul>Hierarchical navigation showing current page location.
<!-- Basic breadcrumbs -->
<div class="text-sm breadcrumbs">
<ul>
<li><a>Home</a></li>
<li><a>Documents</a></li>
<li>Add Document</li>
</ul>
</div>
<!-- Breadcrumbs with icons -->
<div class="text-sm breadcrumbs">
<ul>
<li>
<a>
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
</svg>
Home
</a>
</li>
<li>
<a>
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
</svg>
Documents
</a>
</li>
<li>Add Document</li>
</ul>
</div>Tabbed navigation with multiple styling variants.
<!-- Basic tabs -->
<div role="tablist" class="tabs tabs-lifted">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
<!-- Tab variants -->
<div role="tablist" class="tabs tabs-bordered">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
<div role="tablist" class="tabs tabs-boxed">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
<!-- Tab sizes -->
<div role="tablist" class="tabs tabs-lifted tabs-lg">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
<div role="tablist" class="tabs tabs-lifted tabs-sm">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>
<div role="tablist" class="tabs tabs-lifted tabs-xs">
<a role="tab" class="tab">Tab 1</a>
<a role="tab" class="tab tab-active">Tab 2</a>
<a role="tab" class="tab">Tab 3</a>
</div>Step indicator for multi-step processes.
<!-- Basic steps -->
<ul class="steps">
<li class="step step-primary">Register</li>
<li class="step step-primary">Choose plan</li>
<li class="step">Purchase</li>
<li class="step">Receive Product</li>
</ul>
<!-- Vertical steps -->
<ul class="steps steps-vertical">
<li class="step step-primary">Register</li>
<li class="step step-primary">Choose plan</li>
<li class="step">Purchase</li>
<li class="step">Receive Product</li>
</ul>
<!-- Steps with custom content -->
<ul class="steps">
<li class="step" data-content="✓">Step 1</li>
<li class="step" data-content="✓">Step 2</li>
<li class="step" data-content="✗">Step 3</li>
<li class="step" data-content="★">Step 4</li>
</ul>
<!-- Colored steps -->
<ul class="steps">
<li class="step step-info">Fly to moon</li>
<li class="step step-info">Shrink the moon</li>
<li class="step step-info">Grab the moon</li>
<li class="step step-error" data-content="?">Sit on toilet</li>
</ul>Dropdown menus with various trigger types and positioning.
<!-- Basic dropdown -->
<div class="dropdown">
<div tabindex="0" role="button" class="btn m-1">Click</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<!-- Dropdown on hover -->
<div class="dropdown dropdown-hover">
<div tabindex="0" role="button" class="btn m-1">Hover</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<!-- Dropdown positioning -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn m-1">Click</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="dropdown dropdown-top">
<div tabindex="0" role="button" class="btn m-1">Click</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<!-- Dropdown as card -->
<div class="dropdown">
<div tabindex="0" role="button" class="btn m-1">Click</div>
<div tabindex="0" class="dropdown-content z-[1] card card-compact w-64 p-2 shadow bg-primary text-primary-content">
<div class="card-body">
<h3 class="card-title">Card title!</h3>
<p>you can use any element as a dropdown.</p>
</div>
</div>
</div>Usage Examples:
<!-- Complete navigation setup -->
<div class="navbar bg-base-100 shadow-lg">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
<a class="btn btn-ghost normal-case text-xl">Logo</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li tabindex="0">
<details>
<summary>Parent</summary>
<ul class="p-2">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</details>
</li>
<li><a>Item 3</a></li>
</ul>
</div>
<div class="navbar-end">
<button class="btn btn-ghost btn-circle">
<div class="indicator">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5V8a1 1 0 011-1h3m-9 0v11l5-5h-5z" />
</svg>
<span class="badge badge-xs badge-primary indicator-item"></span>
</div>
</button>
</div>
</div>// Navbar component types
interface NavbarClasses {
"navbar": string;
"navbar-start": string;
"navbar-center": string;
"navbar-end": string;
}
// Menu component types
type MenuVariant = "menu-horizontal" | "menu-vertical";
type MenuSize = "menu-lg" | "menu-sm" | "menu-xs";
interface MenuClasses {
"menu": string;
"menu-title": string;
"active": string;
"disabled": string;
}
// Tab component types
type TabVariant = "tabs-lifted" | "tabs-bordered" | "tabs-boxed";
type TabSize = "tabs-lg" | "tabs-sm" | "tabs-xs";
interface TabClasses {
"tabs": string;
"tab": string;
"tab-active": string;
"tab-disabled": string;
}
// Steps component types
type StepColor =
| "step-primary" | "step-secondary" | "step-accent"
| "step-info" | "step-success" | "step-warning" | "step-error";
interface StepClasses {
"steps": string;
"steps-vertical": string;
"steps-horizontal": string;
"step": string;
}
// Dropdown component types
type DropdownPosition =
| "dropdown-top" | "dropdown-bottom" | "dropdown-left" | "dropdown-right"
| "dropdown-end" | "dropdown-hover" | "dropdown-open";
interface DropdownClasses {
"dropdown": string;
"dropdown-content": string;
}
// Breadcrumbs component types
interface BreadcrumbsClasses {
"breadcrumbs": string;
}