File: src/blocks/navbar/Navbar02.astro
Floating site header alternative to Navbar01. Same brand, links, theme toggle, and CTA — rendered as a rounded, blurred bar inset from the top of the viewport (sticky top-4).
Config (identity.ts → navigation)
Uses the same navigation config as Navbar01 (links, cta). The sticky flag is unused here — floating inset is always on.
navigation: {
links: [
{ label: "Themes", href: "/themes/" },
{ label: "Docs", href: "/docs/" },
{ label: "Pricing", href: "/pricing/" },
],
cta: { label: "Browse themes", href: "/themes/", size: "sm" },
},Add to a page
Swap in BaseLayout (or mount once at the top of a page):
---
import Navbar02 from "@/blocks/navbar/Navbar02.astro";
---
<Navbar02 />With overrides:
<Navbar02
width="wide"
links={[
{ label: "Home", href: "/" },
{ label: "Work", href: "/work/" },
]}
ctaLabel="Contact"
ctaHref="/contact/"
/>Props
| Prop | Config key | Notes |
|---|---|---|
links |
navigation.links |
{ label, href }[] |
ctaLabel |
navigation.cta.label |
|
ctaHref |
navigation.cta.href |
|
ctaSize |
navigation.cta.size |
"sm" | "md" | "lg" |
width |
— | Bar max-width: "standard" | "narrow" | "wide" |
Mobile: hamburger expands a panel inside the rounded bar below md.
vs Navbar01: full-bleed sticky strip vs floating rounded inset bar. Use one per layout — don’t stack both.