Components
Navbar
A full-width bar that condenses into a floating glass pill as you scroll — and optionally hides on the way down.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Navbar, Button } from '@vizzele/react';
<Navbar
brand={<Logo />}
links={[{ label: 'Docs', href: '/docs' }, { label: 'Pricing', href: '/pricing' }]}
actions={<Button variant="liquid" size="sm">Sign up</Button>}
hideOnScroll
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | ReactNode | — | Logo. |
links | { label, href, active? }[] | — | Main links (collapse into a menu on mobile). |
actions | ReactNode | — | Right side. |
threshold | number | 40 | Scroll px before condensing. |
hideOnScroll | boolean | false | Slide away while scrolling down. |
position | 'fixed' | 'sticky' | 'fixed' | Positioning. |
Accessibility
- <header> + <nav aria-label>, aria-current on the active link.
- The mobile menu button exposes aria-expanded / aria-controls.