Navbar SaaS
Barre de navigation de style SaaS avec image de marque et liens. Installez Navbar SaaS depuis le registre VLLNT UI avec la CLI shadcn.
Barre de navigation de style SaaS avec image de marque et liens. Fait partie de la famille navigation dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Navbar SaaS a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
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
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.