Navbar
The Navbar component provides a fixed top navigation bar that remains visible as users scroll. It supports responsive behavior with a mobile toggle button to show or hide side navigation. The component leverages our design tokens and Tailwind CSS for consistent styling and integrates Alpine.js for interactivity.
Special Note
The Navbar component works in conjunction with the Sidebar component. When the hamburger menu is present, a click makes a call to toggleSidebar() which is made available via x-data from Sidebar.
Default Navbar
The example below demonstrates a basic Navbar with some sample navigation content.
Source
<Navbar ScreenReaderText="Toggle side navigation">
<div class="p-2 text-on-surface ">
RizzyUI
</div>
<div class="flex items-center gap-4">
<Link Href="/">Home</Link>
<Link Href="/about">About</Link>
<Link Href="/contact">Contact</Link>
</div>
</Navbar>Responsive Navbar Example
In this example, the Navbar includes a mobile toggle button. On small screens (md:hidden), the button (with a menu icon) appears and is accessible via screen readers.
Source
<Navbar ScreenReaderText="Open side navigation">
<div class="p-2 text-on-surface ">
RizzyUI
</div>
<div class="flex items-center gap-4">
<Link Href="/">Dashboard</Link>
<Link Href="/profile">Profile</Link>
<Link Href="/settings">Settings</Link>
</div>
</Navbar>Navbar Component Parameters
| Property | Description |
|---|---|
| ChildContent | RenderFragment – The content to be displayed inside the navbar. |
| ScreenReaderText | string – Optional accessible text for the mobile toggle button. Defaults to "Toggle side navigation". |
Using Extra Attributes for Customization
You can pass additional attributes to the Navbar component to modify its styling. For example, you may add extra Tailwind CSS classes to adjust margins, padding, or background colors.
Source
<Navbar class="bg-primary/10 border-primary">
<div class="flex items-center gap-4">
<Link Href="/">Custom Home</Link>
<Link Href="/about">Custom About</Link>
</div>
</Navbar>