Components

NavBar

All-in-one navbar: standard or dock variant, submenus, profile menu, transparent/glass/solid, fixed/floating/sticky positioning.

npx neonblade add navbar

Standard · Glass · Cyan

Standard · Solid · Pink · With Profile Menu

Standard · Transparent · Green

Standard · navAlign="right" · Logo Left · Items Right · Cyan

Standard · navAlign="right" · Pink · With Profile

Dock Variant · Cyan

Dock Variant · Pink · No Labels

Props Configuration

Prop	Type	Default	Description
`variant`	`"standard" \| "dock"`	`"standard"`	"standard" renders a full-width top bar. "dock" renders a compact floating pill anchored to the top or bottom of the viewport.
`position`	`"fixed" \| "sticky" \| "floating" \| "static"`	`"fixed"`	Positioning mode. "fixed" sticks to the viewport; "floating" renders a centered hovering bar; "sticky" sticks on scroll; "static" flows with the document.
`transparency`	`"transparent" \| "glass" \| "solid"`	`"glass"`	Background style. Pair "transparent" with scrollEffect for a cinematic hero-to-navbar transition.
`color`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Accent color applied to hover states, submenu borders, profile avatar ring, and dock indicator. Preset name or any CSS color.
`logo`	`string \| ReactNode`	-	Logo: an image URL string (rendered as <img>) or any ReactNode (e.g. a custom SVG).
`logoText`	`string`	-	Brand text displayed beside the logo.
`logoHref`	`string`	`"/"`	href the logo links to.
`items`	`NavItem[]`	`[]`	Navigation links. Each item may include label, href, icon, onClick, and a children array for submenus.
`showProfile`	`boolean`	`false`	Show a user avatar button that opens a profile dropdown.
`profileAvatar`	`string \| ReactNode`	-	Avatar: an image URL or any ReactNode. Falls back to the first letter of profileName.
`profileName`	`string`	-	User display name shown at the top of the profile dropdown.
`profileItems`	`ProfileMenuItem[]`	`PRESET_PROFILE_ITEMS`	Profile dropdown items. Each entry has key, label, icon, onClick, and divider. Use the exported PRESET_PROFILE_ITEMS or build your own.
`onProfileAction`	`(key: string) => void`	-	Callback fired when any profile menu item is clicked. Receives the item key.
`scrollEffect`	`boolean`	`true`	When true the navbar transitions from the current transparency to glass on scroll. Best paired with transparency="transparent".
`scrollThreshold`	`number`	`20`	Scroll distance in px before the scroll effect triggers.
`dockPosition`	`"top" \| "bottom"`	`"bottom"`	Pin position for the dock variant.
`dockShowLabels`	`boolean`	`true`	Show text labels beneath icons in the dock variant.
`navAlign`	`"left" \| "center" \| "right"`	`"center"`	Horizontal alignment of desktop nav items. "left" places items after the logo, "center" distributes them in the middle of the bar, "right" pushes all items to the far right (logo stays left).
`dropdownAlign`	`"left" \| "center" \| "right"`	`"center"`	Alignment of submenu dropdowns relative to their trigger button. "left" aligns the dropdown's left edge with the trigger, "center" centers it below, "right" aligns the dropdown's right edge with the trigger.
`className`	`string`	-	Extra CSS class names applied to the <nav> element.