Components / Navbar
Navbar
Top navigation bar with animated sliding active indicator, programmatic items API, three coherent variants (solid / glass / floating), responsive mobile panel, scroll-aware compact mode, and full keyboard navigation (arrow keys / Home / End / Escape).
navigation v0.7.0
Playground
Examples
Solid + sliding indicator
<cg-navbar id="demo-solid" active="docs"><span slot="brand" style="display:flex;align-items:center;gap:8px;"><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" style="color:var(--cg-color-accent-text);"><circle cx="8" cy="8" r="7"/></svg>Cognivo</span><cg-button slot="end" variant="tertiary" size="sm">Log in</cg-button><cg-button slot="end" variant="primary" size="sm">Sign up</cg-button></cg-navbar>Glass + sticky
Scroll inside this container to see the glass blur effect. The navbar stays sticky at the top with backdrop saturation and blur — every layer of content beneath shifts through the translucent surface.
Block 1 of background content.
Block 2 of background content.
Block 3 of background content.
Block 4 of background content.
Block 5 of background content.
Block 6 of background content.
Block 7 of background content.
Block 8 of background content.
Block 1 of background content.
Block 2 of background content.
Block 3 of background content.
Block 4 of background content.
Block 5 of background content.
Block 6 of background content.
Block 7 of background content.
Block 8 of background content.
<div style="height:280px;overflow-y:auto;background:linear-gradient(135deg,#1e1b4b,#312e81,#1e1b4b);border-radius:12px;"><cg-navbar id="demo-glass" variant="glass" sticky active="components"><span slot="brand" style="font-weight:700;">Glass</span><cg-button slot="end" variant="primary" size="sm">Try it</cg-button></cg-navbar><div style="padding:24px;color:#fff;font-size:13px;line-height:1.7;">Scroll inside this container to see the glass blur effect. The navbar stays sticky at the top with backdrop saturation and blur — every layer of content beneath shifts through the translucent surface.<br><br>Block 1 of background content.<br><br>Block 2 of background content.<br><br>Block 3 of background content.<br><br>Block 4 of background content.<br><br>Block 5 of background content.<br><br>Block 6 of background content.<br><br>Block 7 of background content.<br><br>Block 8 of background content.</div></div>Floating pill
<div style="background:radial-gradient(circle at 30% 50%,#312e81,#0f172a);padding:12px;border-radius:12px;"><cg-navbar id="demo-floating" variant="floating" active="home"><span slot="brand" style="display:flex;align-items:center;gap:8px;font-weight:600;"><svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" style="color:var(--cg-color-accent-text);"><circle cx="8" cy="8" r="7"/></svg>Floating</span><cg-button slot="end" variant="primary" size="sm">Try it</cg-button></cg-navbar></div>With kbd hints + badge
<cg-navbar id="demo-kbd" active="search" sticky bordered><span slot="brand" style="font-weight:700;letter-spacing:-0.02em;">⌘ Linear-style</span><cg-button slot="end" variant="primary" size="sm">New issue</cg-button></cg-navbar>Disabled item + arrow-key nav
<cg-navbar id="demo-keyboard" active="overview" bordered><span slot="brand" style="font-weight:700;">Try Arrow Keys</span></cg-navbar>Import
import { CgNavbar } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-navbar';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavItem[] | [] | Primary nav items — drives the sliding indicator and tab semantics |
active | string | "" | value of the active NavItem (consumer wires to router) |
variant | "solid" | "glass" | "floating" | "solid" | Visual treatment |
sticky | boolean | false | Position-sticky to top |
bordered | boolean | false | Bottom border |
compact-on-scroll | boolean | false | Shrink height + add elevation after scroll past 16px |
mobile-open | boolean | false | Mobile panel open state |
brand-href | string | "" | Makes the brand area a clickable anchor |
Events
| Event | Detail | Description |
|---|---|---|
cg-navbar-toggle | {open: boolean} | Mobile menu toggled |
cg-navbar-select | {value: string, item: NavItem} | A nav item activated (click or Enter/Space) |