Components
Sidebar
Navigation with a liquid current-page marker that stretches between links on two springs, a light that follows the hovered link, foldable sections and an iridescent edge that glows near the pointer.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Sidebar } from '@vizzele/react';
<Sidebar
active={usePathname()}
linkAs={Link}
sections={[
{
title: 'Workspace',
items: [
{ href: '/', label: 'Overview', icon: <HomeIcon /> },
{ href: '/inbox', label: 'Inbox', badge: 3 },
],
},
{ title: 'Projects', collapsible: true, items: [{ href: '/p/aurora', label: 'Aurora' }] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sections | SidebarSection[] | — | { title?, items, collapsible?, defaultOpen? } |
items[] | SidebarItem | — | { href, label, icon?, badge? } |
active | string | — | href of the current page — gets the marker and aria-current. |
linkAs | ElementType | 'a' | Your router link, e.g. Next.js Link. |
variant | 'panel' | 'plain' | 'panel' | Glass panel or bare list. |
header / footer | ReactNode | — | Pinned above and below the scrolling list. |
label | string | 'Sidebar' | Accessible name of the nav landmark. |
onNavigate | (href) => void | — | Called when a link is clicked (close a drawer here). |
Accessibility
- A <nav> landmark with a name; the current link has aria-current="page".
- Foldable section titles are buttons with aria-expanded and aria-controls; links inside a folded section leave the tab order.
- The marker and hover light are decorative (aria-hidden).
- On load the current link is scrolled into view inside the sidebar without moving the page.