Navbar SaaS
SaaS-style navigation bar with branding and links. Install Navbar SaaS from the VLLNT UI registry with the shadcn CLI.
SaaS-style navigation bar with branding and links. Part of the navigation family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Navbar SaaS to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/navbar-saas.jsonSource
"use client";
import { Menu, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
import { Button } from "../button/button";
import { useSidebar } from "../sidebar-provider/sidebar-provider";
import { ThemeToggle } from "../theme-toggle/theme-toggle";
export type NavItem = {
href: string;
title: string;
};
export type NavbarSaasProps = {
brand?: ReactNode;
navItems?: NavItem[];
rightSlot?: ReactNode;
showMobileMenu?: boolean;
};
const EMPTY_NAV_ITEMS: NavItem[] = [];
export function NavbarSaas({
brand,
navItems = EMPTY_NAV_ITEMS,
rightSlot,
showMobileMenu = true,
}: NavbarSaasProps) {
const pathname = usePathname();
const { open, setOpen } = useSidebar();
return (
<header
className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0"
data-slot="navbar-saas"
style={{ WebkitBackdropFilter: "blur(8px)" }}
>
<div className="w-full">
<div className="mx-auto flex h-16 items-center justify-between px-4">
<div className="flex items-center gap-4">
{showMobileMenu ? (
<Button
aria-expanded={open}
aria-label="Toggle sidebar"
data-testid="navbar-saas-mobile-trigger"
onClick={() => {
setOpen(!open);
}}
size="icon"
variant="ghost"
>
{open ? <X className="size-4" /> : <Menu className="size-4" />}
</Button>
) : null}
{brand ? (
typeof brand === "string" ? (
<Link className="text-xl font-bold truncate" href="/">
{brand}
</Link>
) : (
brand
)
) : null}
{navItems.length > 0 ? (
<nav className="hidden lg:flex gap-6">
{navItems.map((item) => (
<Link
className={cn(
"text-sm font-medium transition-colors hover:text-foreground/80",
pathname === item.href
? "text-foreground"
: "text-foreground/60",
)}
href={item.href}
key={item.href}
>
{item.title}
</Link>
))}
</nav>
) : null}
</div>
<div className="flex items-center gap-4">
{rightSlot}
<ThemeToggle
dict={{
theme: {
dark: "Dark",
light: "Light",
system: "System",
toggle_theme: "Toggle theme",
},
}}
/>
</div>
</div>
</div>
</header>
);
}
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.