Docs

Navbar

Navbar

A clean, reusable navigation bar with scroll-aware styling, animated hover, dropdown support, and mobile responsiveness.

npx shadcn@latest add https://motion-x.vercel.app/r/v0/navbar-demo.json

Installation

Examples

npx shadcn@latest add https://motion-x.vercel.app/r/v0/navbar-demo3.json

npx shadcn@latest add https://motion-x.vercel.app/r/v0/navbar-demo2.json

Props

NavItem

Prop	Type	Description
`name`	`string`	Display text for the nav link
`link`	`string`	URL or anchor href
`icon`	`ReactNode`	Optional icon element
`children`	`DropdownItem[]`	Optional dropdown items

DropdownItem

Prop	Type	Description
`name`	`string`	Dropdown item title
`description`	`string`	Optional description text
`link`	`string`	URL or anchor href
`icon`	`ReactNode`	Optional icon element

NavButton

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Button style variant

Aurora Hero Video Dialog