Primitives
Navbar
Responsive navigation bar with brand, nav links, and CTA buttons. Collapses to a hamburger menu on mobile.
Installation
npm install @trinkui/reactImport
import { Navbar } from "@trinkui/react";Usage
Sticky with Blur
Combine sticky and blur for a frosted-glass navbar that stays at the top of the viewport.
Without Border
Navbar Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | — | Custom logo element; overrides brandName |
brandName | string | — | Brand text when no logo is provided |
links | NavLink[] | [] | Navigation links { label, href, active? } |
primaryAction | { label: string; href: string } | — | Primary CTA button |
secondaryAction | { label: string; href: string } | — | Secondary CTA button |
bordered | boolean | true | Show a bottom border |
blur | boolean | false | Apply backdrop-blur effect (pairs well with sticky) |
sticky | boolean | false | Stick to the top of the viewport on scroll |
className | string | — | Additional CSS classes |
NavLink Props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | Link text |
hrefrequired | string | — | Link URL |
active | boolean | false | Highlight as the current page |
Accessibility
- Uses a
<nav>element witharia-label="Main navigation". - The mobile hamburger button has
aria-expandedto communicate open/closed state. - The hamburger button includes
aria-label="Toggle navigation menu". - All interactive elements have visible
focus-visiblestyles.