Navbar

Sticky top navigation bar: brand, horizontal nav links, and a right-aligned actions cluster. It is a frosted-glass surface when materials are enabled (--lz-glass). Use exactly one per page as the global app header; .navbar-primary gives the bold accent-colored version.

Root: .navbar on <nav>

Example

<nav class="navbar"><a class="navbar-brand" href="/">Lozenge</a><ul class="navbar-nav"><li><a class="nav-link active" href="#" aria-current="page">Your work</a></li><li><a class="nav-link" href="#">Projects</a></li></ul><div class="navbar-actions"><button class="btn btn-primary">Create</button><span class="avatar avatar-md">JC</span></div></nav>

Contract

Variants & modifiers

Class	Axis	Rules
`navbar-primary`	modifier	optional

Structure

Selector	Required	Description
`.navbar-brand`	optional	Logo/product link, typically first child.
`.navbar-nav`	optional	A <ul> of <li> items each containing an <a class="nav-link">; mark the current page's link with .active.
`.navbar-actions`	optional	Right-aligned cluster (margin-left:auto) for buttons, search, and the user avatar.

Accessibility

On	Attribute	Level	When
`.navbar`	`aria-label`	recommended	The page contains more than one <nav> landmark (e.g. navbar + breadcrumbs + sidebar nav) — label each to distinguish them.

Use a real <nav> element. Mark the current page with .active and aria-current="page" on the nav-link. The navbar is a glass surface: never nest another glass surface (dropdown-menu, flag, modal) in its subtree — glass-on-glass compounds blur and breaks contrast guarantees; dropdowns opened from the navbar should use the popover recipe, which renders in the top layer.

Nesting

Allowed in:

directly under <body>, above the app shell

Never inside (or containing):

.navbar
.dropdown-menu
.flag
dialog.modal