Docs / Components / AppBar
ven.js
AppBar
venjs.appBar(props) — a sticky, blurred top navigation bar with a title, centered links, and an optional trailing slot.
Signature
venjs.appBar(props) → VNode
Props
| Prop | Type | Description |
|---|---|---|
title | string | Brand/title shown on the left (defaults to "VENJS"). |
links | VNode | VNode[] | Center navigation items (hidden on small screens via hidden md:flex). |
trailing | VNode | Right-side slot; defaults to a placeholder avatar circle. |
Example
venjs.appBar({
title: "Acme",
links: [
venjs.a({ href: "#/home", class: "nav-link" }, "Home"),
venjs.a({ href: "#/docs", class: "nav-link" }, "Docs")
],
trailing: venjs.button({ variant: "outline" }, "Sign in")
})
The bar uses
sticky top-0 z-50 ... backdrop-blur-md bg-white/80 border-b. Match its look by giving your links the nav-link utility classes you define in your stylesheet.