Navbar
Classes Information
| ClassName | Description |
|---|---|
| navbar | Navbar base class |
| navbar-start | Will set the items inside this tag to the left |
| navbar-end | Will set the items inside this tag to the right |
| navbar-center | Will set the items inside this tag to the center |
| navbar-sticky | Will set navbar attached to the top of the website |
| navbar-floating | Will set navbar floating effect and will not take the whole width, 80 rem by default |
| navbar-bordered | will set navbar with border to the bottom side |
| navbar-rounded | Will set navbar rounded to the bottom side |
| navbar-item Apply | to items which are elements and will set a hover effect a more properties by default |
| navbar-active | Will set the active item with a color primary |
| navbar-no-boxShadow | Will remove the boxShadow |
Basic Usage
Example Code
<div class="navbar">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
</div>Start End
Example Code
<div class="navbar">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-end">
<a class="navbar-item">Item 1</a>
<a class="navbar-item">Item 2</a>
<a class="navbar-item">Item 3</a>
</div>
</div>With Dropdown
Example Code
<div class="navbar rounded-lg">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-end">
<div class="avatar avatar-ring avatar-md">
<div class="dropdown-container">
<div class="dropdown">
<label class="flex cursor-pointer px-0" tabindex="0">
<img
src="https://ui-avatars.com/api/?name=Rens+UI"
alt="avatar"
/>
</label>
<div class="dropdown-menu dropdown-menu-bottom-left">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
</div>
</div>
</div>
</div>Start Center End Item
Example Code
<div class="navbar">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-center">
<a class="navbar-item">Item 1</a>
<a class="navbar-item">Item 2</a>
<a class="navbar-item">Item 3</a>
</div>
<div class="navbar-end">
<a class="navbar-item">Item</a>
</div>
</div>Sticky
Consectetur scelerisque dui dictum fusce posuere class sit curabitur. Massa lorem id tortor rutrum posuere nisl. Enim sapien dictumst semper tristique faucibus fringilla pulvinar curae egestas velit montes. Curae pretium ornare himenaeos eros pede tempus risus sagittis quam odio. Magnis nisl consectetur est felis sem dictum semper finibus. Erat dis elementum rhoncus morbi malesuada. Et sagittis senectus erat accumsan inceptos sem turpis. Metus dis mauris diam tristique torquent rutrum convallis viverra suspendisse maximus. Mattis diam nostra litora gravida dui cras euismod rhoncus sodales suscipit quis. Lacus ligula letius class vehicula egestas accumsan ridiculus erat faucibus venenatis lobortis. Rutrum nibh neque ullamcorper auctor cras consectetuer integer porttitor phasellus. Fermentum parturient duis nam sapien primis curabitur nostra. Ex nunc purus ultrices consectetuer tellus. Tincidunt si tempus sit feugiat odio lacinia ridiculus quis egestas eros. Semper metus eget praesent turpis amet mattis vehicula etiam. Feugiat sollicitudin imperdiet vitae tellus tortor accumsan. Justo dictumst nisl finibus ut neque taciti. Donec efficitur dui semper parturient interdum ultricies mauris est suspendisse. Bibendum et pharetra non cubilia tempor tincidunt nullam dictum. Ullamcorper neque sapien magnis class per dis. Sociosqu nulla dolor mauris tincidunt taciti scelerisque ultrices duis etiam dis. Semper si ipsum nibh a ac penatibus nisl dui nisi taciti.
Example Code
<div class="navbar navbar-sticky">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-end">
<a class="navbar-item">Item</a>
</div>
</div>Glass
Example Code
<div class="navbar navbar-glass">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-end">
<a class="navbar-item">Item</a>
</div>
</div>Floating
Consectetur scelerisque dui dictum fusce posuere class sit curabitur. Massa lorem id tortor rutrum posuere nisl. Enim sapien dictumst semper tristique faucibus fringilla pulvinar curae egestas velit montes. Curae pretium ornare himenaeos eros pede tempus risus sagittis quam odio. Magnis nisl consectetur est felis sem dictum semper finibus. Erat dis elementum rhoncus morbi malesuada. Et sagittis senectus erat accumsan inceptos sem turpis. Metus dis mauris diam tristique torquent rutrum convallis viverra suspendisse maximus. Mattis diam nostra litora gravida dui cras euismod rhoncus sodales suscipit quis. Lacus ligula letius class vehicula egestas accumsan ridiculus erat faucibus venenatis lobortis. Rutrum nibh neque ullamcorper auctor cras consectetuer integer porttitor phasellus. Fermentum parturient duis nam sapien primis curabitur nostra. Ex nunc purus ultrices consectetuer tellus. Tincidunt si tempus sit feugiat odio lacinia ridiculus quis egestas eros. Semper metus eget praesent turpis amet mattis vehicula etiam. Feugiat sollicitudin imperdiet vitae tellus tortor accumsan. Justo dictumst nisl finibus ut neque taciti. Donec efficitur dui semper parturient interdum ultricies mauris est suspendisse. Bibendum et pharetra non cubilia tempor tincidunt nullam dictum. Ullamcorper neque sapien magnis class per dis. Sociosqu nulla dolor mauris tincidunt taciti scelerisque ultrices duis etiam dis. Semper si ipsum nibh a ac penatibus nisl dui nisi taciti.
Example Code
<div class="navbar navbar-floating">
<div class="navbar-start">
<a class="navbar-item">Rens UI</a>
</div>
<div class="navbar-end">
<a class="navbar-item">Item</a>
</div>
</div>