Navbar

A customizable navigation bar component with support for branding, navigation items, actions, and toggle functionality.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Navbar Code

Copy Navbar Code

Nav Props

Name	Type	Required	Default	Description
variant	"default" \| "bordered" \| "floating"	No	"default"	The visual style of the navbar.
sticky	boolean	No	false	Determines if the navbar should stick to the top of the page when scrolling.
className	string	No	undefined	Additional class names for styling the navbar.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the navbar.

NavContainer Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the navbar container.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the navbar container.

NavContent Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the navbar content.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the navbar content area.

NavBrand Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the navbar brand section.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the navbar brand section.

NavItems Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the navbar items container.
children	React.ReactNode	Yes	undefined	Navigation items to be displayed inside the navbar.

NavItem Props

Name	Type	Required	Default	Description
href	string	Yes	undefined	The URL the navigation item links to.
active	boolean	No	false	Indicates if the navigation item is active.
className	string	No	undefined	Additional class names for styling the navigation item.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the navigation item.

NavActions Props

Name	Type	Required	Default	Description
className	string	No	undefined	Additional class names for styling the navbar actions container.
children	React.ReactNode	Yes	undefined	Action buttons or elements to be displayed inside the navbar.

NavToggle Props

Name	Type	Required	Default	Description
onClick	() => void	Yes	undefined	Callback function triggered when the toggle button is clicked.
className	string	No	undefined	Additional class names for styling the toggle button.
aria-label	string	No	"Toggle Menu"	Accessible label for the toggle button.