Navbar / Header

A highly responsive, production-ready Navigation Bar. It manages pure CSS dropdowns for complex desktop menus, and uses CSS transitions to smoothly animate a beautiful slide-out drawer on mobile devices.

Switch any preview to a mobile width with the device buttons to see the hamburger drawer.

E-Commerce Mega Nav

A conversion-focused e-commerce navigation inspired by Framer's E-Commerce Mega Nav. Features a top announcement bar, product-rich mega menus with direct product previews and promotional cards, live search, cart badge with mini-cart, and a responsive mobile drawer with drill-down categories.

Setvariant"ecommerce-mega-nav": activates the comprehensive e-commerce navigation with announcement bar, multi-category mega menus, product cards, promo banners, cart indicator, and mobile drawer.
PasslogoText"NUTRIFY": sets the brand name in both the desktop bar and mobile drawer.
Customizecolor: themes the announcement bar, badges, active indicators, and checkout CTA buttons.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

npx shadcn@latest add @algorize-ui/navbar

components/custom/blocks/NavbarBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Step 1 installs this for you. Run it yourself only if you are adding Navbar to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

button is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/button

Examples

The default bar: wordmark, desktop links with dropdowns, and a mobile drawer.

Setcolor"indigo" | "rose" | "emerald" | "zinc" | "primary" | "#hex": themes the logo mark icon and the primary call-to-action button.

Centered

Setvariant"centered": to balance the logo in the middle with links either side.

Floating

Setvariant"floating": for a pill-shaped glass bar that hovers over the hero.

Minimal

Setvariant"minimal": to drop the border and background entirely.

Glass

Setvariant"glass": to keep the full-width bar but blur whatever scrolls beneath it.

Props Reference

Prop	Type	Default	Description
`variant`	`"default" \| "floating" \| "centered" \| "minimal" \| "glass" \| "ecommerce-mega-nav"`	`"default"`	Determines the structural layout and positioning of the navbar. Use `"ecommerce-mega-nav"` for a full-featured e-commerce header with announcement bar, product-rich mega menus, cart, and mobile drawer.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Applies global color themes to the logo icon and primary Call-to-Action button. Accepts named themes or valid hex codes (e.g. `"#8b5cf6"`).
`logoText`	`string`	`"Nexus"`	The text displayed next to the logo mark.
`linkComponent`	`React.ElementType`	`"a"`	The React component used for internal links. In Next.js, pass `next/link` to preserve client-side routing.