Navbar
A viewport-level marketing navigation shell with scroll-reactive glass styling, industry dropdowns, auth actions, and a mobile sheet menu.
Preview & Interactive Laboratory
Integration Surface
Stratum.
Marketing Shell
Scroll State
The shell tightens spacing and switches to a glass surface after the page scroll crosses a small threshold.
Industry Menus
Uses dropdown primitives to expose grouped vertical routes without overloading the top-level nav.
Mobile Drawer
Falls back to a full-height sheet for stacked navigation, industry quick links, and theme control.
Behavior Notes
Viewport-Level Component
`Navbar` is fixed to the viewport, so its best live preview is the landing page itself rather than an embedded panel inside the docs canvas.
Config-Driven Navigation
Primary items and industry dropdown groups are sourced from `mainNav` and `industries`, which keeps the shell aligned with navigation config.
Usage & Implementation
import { Navbar } from "@/components/navbar"
<Navbar className="z-50" />Granular Customization
Viewport Shell
Controls the fixed wrapper, spacing, and scroll-reactive glass state.
className={`className`}Desktop Navigation
Primary links and industry dropdown clusters.
className={`mainNav / industries config`}Mobile Sheet
Controls the small-screen menu drawer and its content sections.
className={`SheetContent className='...'`}API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Extends the outer fixed header wrapper. |