Navbar 10 - Centered logo with links split on both sidesPro
A symmetrical editorial header that places a serif-free wordmark dead center with navigation links divided evenly to its left and right, plus compact icon actions. Use it for studios, restaurants, magazines and brand sites where the logo deserves center stage.
About Navbar 10
A symmetrical editorial header that places a serif-free wordmark dead center with navigation links divided evenly to its left and right, plus compact icon actions. Use it for studios, restaurants, magazines and brand sites where the logo deserves center stage.
Navbar 10 is a pro navbar block for React, built on shadcn/ui and Tailwind CSS. It ships as 105 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- centered logo
- split
- symmetric
- editorial
- brand
- sheet
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/navbar-10Dependencies installed automatically: lucide-react.
Uses: button, sheet, utils.
Usage
import Navbar10 from "@/components/blocks/navbar-10"
export default function Page() {
return <Navbar10 />
}