Navbar

A responsive navigation bar component with brand, navigation items, and actions. Features mobile menu support and multiple variants for different design needs.

This is the content below the navbar. The navbar is responsive and includes mobile menu support.

Navbar Component Usage

tsx

1import {
2  Navbar,
3  NavbarBrand,
4  NavbarMenu,
5  NavbarLink,
6  NavbarActions,
7} from "@/app/ui/molecules/Navbar";
8import Button from "@/app/ui/atoms/Button";
9
10const navItems = [
11  { label: "Home", href: "/", active: true },
12  { label: "About", href: "/about" },
13  { label: "Products", href: "/products" },
14  { label: "Contact", href: "/contact" },
15];
16
17export default function Example() {
18  return (
19    <Navbar
20      brand="Your Brand"