Anime Navbar
A sleek and animated navigation bar built with Framer Motion for a smooth user experience.
The Navbar will show at top of the page
Installation
Install this component and its dependencies with a single command.
npx shadcn@latest add https://ui.voxletstudio.com//r/anime-navbar.jsonOnce your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/anime-navbar
Props
NavBarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavItem[] | [] | An array of navigation items, each containing a name, URL, and icon. |
| className | string | undefined | Optional custom class names for styling. |
| defaultActive | string | undefined | Specifies which navigation item should be active by default. |
NavItem
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | undefined | The label for the navigation item. |
| url | string | undefined | The destination URL for the navigation item. |
| icon | LucideIcon | undefined | The icon representing the navigation item. |
Inspired by Jatin Yadav's Anime Navbar component on 21st.dev.