Navbar

Responsive top navigation bar. Collapses progressively as viewport shrinks (full → compact → minimal → mobile), falling back to an Drawer-based hamburger menu at the mobile stage. Active-item tracking supports route, hash, scroll-spy, or fully manual modes via activeMode.

items accepts either a real array or a JSON string, so it works directly as a plain HTML attribute — no script needed.

Example

<and-navbar
  items='[{"id":"home","label":"Home","href":"#"},{"id":"docs","label":"Docs","href":"#"},{"id":"about","label":"About","href":"#"}]'
  active-item="home"
></and-navbar>

Properties

Property	Attribute	Description	Type	Default
activeItem	active-item	The active navigation item ID. Reflects the headless‐core state.	string	''
activeMode	active-mode	Strategy used to compute active item. - auto: prefers scroll-spy when possible, then route, then hash - route: pathname matching (/docs, /demo) - hash: hash matching (#hero) - scroll: scroll-spy based section tracking - manual: external control only (no auto detection)	"auto" | "hash" | "manual" | "route" | "scroll"	'auto'
ariaNavLabel	aria-nav-label	ARIA label for the navigation	string	'Main navigation'
autoCollapse	auto-collapse	When true, the navbar automatically detects when the nav items overflow and switches to a smaller responsive stage regardless of breakpoints. Content-aware collapse.	boolean	true
compactBreakpoint	compact-breakpoint	Breakpoint (px) below which the end section enters compact mode (icon-only, labels hidden). Main nav is still visible.	number	1024
itemVariant	item-variant	Visual style for individual nav links. Controls how each link looks, independent of the navbar container variant. - default — subtle rounded pill with hover bg - underline — bottom-border indicator on active - filled — solid primary bg on active	"default" | "filled" | "underline"	'default'
items	items	Navigation items to display. When provided, the component renders its own items (with full keyboard navigation, scroll-spy, and active‐indicator). When empty, use the nav slot for custom content.	NavItem[] | string	[]
minimalBreakpoint	minimal-breakpoint	Breakpoint (px) below which the main (nav links) section is hidden and the navigation moves to the hamburger drawer. Only start + compact end are visible.	number	768
mobileBreakpoint	mobile-breakpoint	Breakpoint (px) below which the navbar switches to mobile mode (hamburger menu). Set to 0 to always show desktop, or a high value to always show mobile.	number	640
position	position	Positioning behaviour	"fixed" | "static" | "sticky"	'static'
routeMatchMode	route-match-mode	Route matching mode used when activeMode resolves through pathname.	"exact" | "prefix"	'prefix'
scrollSpy	scroll-spy	Enable scroll-spy (auto-detect active section by scroll position). Items must have href starting with #.	boolean	false
scrollSpyOffset	scroll-spy-offset	Scroll-spy offset from the top of viewport (px).	number	100
variant	variant	Visual variant	"default" | "filled" | "floating" | "glass"	'default'

Events

Event	Description	Type
andMobileMenuChange	Emitted when mobile menu state changes	CustomEvent<boolean>
andNavItemClick	Emitted when active item changes	CustomEvent<string>
andNavLinkClick	Emitted when a navigation link is clicked	CustomEvent<{ id: string; href: string; }>
andResponsiveStageChange	Emitted when responsive stage changes	CustomEvent<"compact" | "full" | "minimal" | "mobile">

Generated from packages/web-components/src/components/and-navbar/readme.md — keep this in sync with the Stencil source, don't hand-edit the numbers.