Tailwind CSS navbar component Navbar Copy Code
<nav class="navbar">
<ul class="navbar-list gap-x-6">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Navbar placements The navbar component is by default positioned in the left side of the screen, but it can be placed depending upon the use case using utility classes such as navbar-x-{position} and navbar-y-{position}, where {position} is start, center, or end. Placement is designed with RTL and LTR compatibility in mind, making the navbar adaptable to different language directions and layouts.
Use navbar-x-{position} for horizontal placement and navbar-y-{position} for vertical placement, where {position} can be start, center, or end. These classes are applied to the navbar component.
Horizontally align the navbar list to the left (start) position Copy Code
<nav class="navbar navbar-x-start">
<ul class="navbar-list gap-x-6">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Horizontally align the navbar list to the center position Copy Code
<nav class="navbar navbar-x-center">
<ul class="navbar-list gap-x-6">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Horizontally align the navbar list to the right (end) position Copy Code
<nav class="navbar navbar-x-end">
<ul class="navbar-list gap-x-6">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Vertically align the navbar list to the top (start) position Copy Code
<nav class="navbar navbar-y-start h-56">
<ul class="navbar-list">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Vertically align the navbar list to the center position Copy Code
<nav class="navbar navbar-y-center h-56">
<ul class="navbar-list">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>
Vertically align the navbar list to the bottom (end) Copy Code
<nav class="navbar navbar-y-end h-56">
<ul class="navbar-list">
<li>
<a href="" class="link link-xs link-hover">Navbar list 1</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 2</a>
</li>
<li>
<a href="" class="link link-xs link-hover">Navbar list 3</a>
</li>
</ul>
</nav>