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

PropTypeDescription
titlestringBrand/title shown on the left (defaults to "VENJS").
linksVNode | VNode[]Center navigation items (hidden on small screens via hidden md:flex).
trailingVNodeRight-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.