block / navigation
PREVIEW READYNavbar
A responsive product navigation bar with brand, search, menu, and action slots.
Designed as a complete stateful module
Responsive, keyboard-ready, theme-aware, and owned by your project after installation.
INSTALL / SOURCE REGISTRY
Add Navbar to your project
The command adds the component source and its DesignOS base dependency.
$
pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/navbar.jsonregistry/default/blocks/navbar.tsx
import * as React from "react"
import { Blocks, Menu, Search } from "lucide-react"
import "@/components/designos/designos.css"
export type NavLink = { label: string; href: string }
export function Navbar({ links, action, onSearch, onMenu, homeHref = "/" }: { links: NavLink[]; action?: React.ReactNode; onSearch?: () => void; onMenu?: () => void; homeHref?: string }) {
return <header className="dos-navbar"><a className="dos-wordmark" href={homeHref} aria-label="DesignOS home"><span className="dos-wordmark__mark"><Blocks aria-hidden="true" size={16} /></span>DesignOS</a><nav className="dos-navbar__links" aria-label="Primary">{links.map((link) => <a key={link.href} href={link.href}>{link.label}</a>)}</nav><div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: onSearch ? 0 : "auto" }}>{onSearch && <button type="button" className="dos-icon-button dos-button--ghost" aria-label="Search" onClick={onSearch}><Search aria-hidden="true" /></button>}{action}{onMenu && <button type="button" className="dos-icon-button dos-button--ghost" aria-label="Open menu" onClick={onMenu}><Menu aria-hidden="true" /></button>}</div></header>
}
Component contract
- Source-owned after installation
- Dark and light theme variables
- Keyboard and visible-focus behavior
- Reduced-motion fallback
- Responsive from 320px upward
- IBM Plex Sans + JetBrains Mono hierarchy