Navbar

Top navigation bar. Free, MIT · Navigation and layout › Structure

Below 768px of its own width (container query) the links collapse into a menu button that opens them in a sheet under the bar.

Installation

npx valyro-cli@latest add navbar

npx shadcn@latest add https://valyro.xyz/r/navbar.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Navbar } from 'valyro-ui';

Prop	Type	Default
`brand`	`ReactNode`		Logo / product name on the left.
`links`	`NavbarLink[]`	`[]`	Navigation links in the center; each renders as an anchor with `href`, else a button.
`actions`	`ReactNode`		Right-side slot: buttons, avatar, search. Stays visible on narrow widths.
`sticky`	`boolean`	`false`	Stick to the top of the nearest scroll container.
`label`	`string`	`'Main'`	Accessible name of the links navigation.
`menuLabel`	`string`	`'Menu'`	Accessible name of the button that opens the links on narrow widths.
`menuOpen`	`boolean`		Whether the links sheet is open (narrow widths only; controlled).
`defaultMenuOpen`	`boolean`	`false`	Initial state of the links sheet when uncontrolled. Opening it this way does not move focus into it.
`onMenuOpenChange`	`(open: boolean) => void`		Called when the links sheet opens or closes.

App Shell — Application frame
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode