Navbar 21 - Resources mega menu with blog post cardsPro
A header whose Resources menu opens a panel with a sidebar of resource types on the left and the latest blog posts as image cards with category and date on the right. Use it for content-rich SaaS and media sites that want to surface fresh articles straight from the navigation.
About Navbar 21
A header whose Resources menu opens a panel with a sidebar of resource types on the left and the latest blog posts as image cards with category and date on the right. Use it for content-rich SaaS and media sites that want to surface fresh articles straight from the navigation.
Navbar 21 is a pro navbar block for React, built on shadcn/ui and Tailwind CSS. It ships as 164 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.
- mega menu
- resources
- blog
- cards
- navigation menu
- content
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/navbar-21Dependencies installed automatically: lucide-react.
Uses: button, navigation-menu, sheet, utils.
Usage
import Navbar21 from "@/components/blocks/navbar-21"
export default function Page() {
return <Navbar21 />
}