Navbar 02

File: src/blocks/navbar/Navbar02.astro

Floating rounded navbar inset from the viewport top. Same nav / CTA / dropdown model as Navbar 01, plus a width prop for the bar. Swap in BaseLayout when you want the floating chrome.

Types: src/lib/nav.ts · Client: src/scripts/navbar.ts

Mobile: hamburger + slide panel below md. Dropdown parents expand into a vertical accordion list.

Config (identity.ts → navigation)

Uses the same navigation slice as Navbar 01. width is typically passed as a prop (not stored on navigation).

// src/config/identity.ts
navigation: {
  // sticky applies to Navbar 01; Navbar 02 is always inset + sticky
  sticky: true,
  // Desktop dropdowns: "hover" | "click" (mobile accordion is always tap)
  dropdownTrigger: "hover",
  links: [
    // Simple top-level link
    { label: "Themes", href: "/themes/" },

    // Dropdown — children only (trigger has no own URL)
    {
      label: "Docs",
      children: [
        { label: "Get started", href: "/docs/get-started/" },
        { label: "Blocks", href: "/docs/blocks/" },
        { label: "Components", href: "/docs/components/" },
        { label: "Templates", href: "/docs/templates/" },
      ],
    },

    // Dropdown — parent href + children (short form)
    // Or use `sections` for mega menus — see Navbar 04
    // Label links to href; chevron opens the menu. Also drives active-state matching.
    {
      label: "Product",
      href: "/themes/",
      children: [
        { label: "Browse themes", href: "/themes/" },
        { label: "Pricing", href: "/pricing/" },
      ],
    },

    { label: "Pricing", href: "/pricing/" },
    { label: "About", href: "/about/" },
  ],
  cta: {
    label: "Browse themes",
    href: "/themes/",
    size: "md", // "sm" | "md" | "lg"
  },
},

Link shapes

Example	Shape	Result
Themes	{ label, href }	Plain link
Docs	{ label, children }	Dropdown trigger; menu is children only
Product	{ label, href, children }	Dropdown; href is first item + active match

import type { NavLink } from "@/lib/nav";

const links: NavLink[] = [
  { label: "Themes", href: "/themes/" },
  {
    label: "Docs",
    children: [
      { label: "Get started", href: "/docs/get-started/" },
      { label: "Blocks", href: "/docs/blocks/" },
      { label: "Components", href: "/docs/components/" },
    ],
  },
  {
    label: "Product",
    href: "/themes/",
    children: [
      { label: "Browse themes", href: "/themes/" },
      { label: "Pricing", href: "/pricing/" },
    ],
  },
];

Field	Type	Notes
label	string	Trigger / link text
href	string?	Omit for dropdown-only triggers. With children / sections, the label links to this URL and the chevron opens the menu
children	{ label, href, description? }[]?	Title + description list (single column)
width	sm | md | lg | xl?	Per-parent dropdown panel width (overrides dropdownWidth)
sections	NavMegaSection[]?	Modular mega columns — see Navbar 04

Dropdown panel width

Resolution: link.width → dropdownWidth prop → "sm" (Navbar 02 default for single-column menus).

Preset	Approx. panel width
sm	20rem (default)
md	28rem
lg	40rem
xl	56rem

{
  label: "Docs",
  href: "/docs/",
  width: "md",
  children: [
    { label: "Blocks", href: "/docs/blocks/", description: "Full-width sections." },
  ],
}

<Navbar02 dropdownWidth="md" />

Note: Navbar 02 also has a separate bar width prop (standard | narrow | wide) for the floating header max-width — that is not the dropdown panel size.

Desktop trigger (dropdownTrigger)

Value	Behavior
"click"	Open / close on click (default if unset)
"hover"	Open on pointer enter, close on leave (short delay). Click still toggles for touch

navigation: {
  dropdownTrigger: "click", // or "hover"
  links: [/* … */],
  cta: { /* … */ },
},

Override per instance:

<Navbar02 dropdownTrigger="click" width="wide" />

Add to a page

---
import Navbar02 from "@/blocks/navbar/Navbar02.astro";
---

<Navbar02 />

Props override matching keys from config — including inline dropdown links:

<Navbar02
  width="wide"
  dropdownTrigger="click"
  links={[
    { label: "Home", href: "/" },
    {
      label: "Docs",
      children: [
        { label: "Get started", href: "/docs/" },
        { label: "Blocks", href: "/docs/blocks/" },
      ],
    },
    {
      label: "Resources",
      href: "/docs/",
      children: [
        { label: "Customize", href: "/docs/customize/" },
        { label: "Deploy", href: "/docs/deploy/" },
      ],
    },
  ]}
/>

Props

Prop	Config key	Type / values	Default / notes
links	navigation.links	NavLink[]	Optional children; per-parent width for panel size
dropdownWidth	navigation.dropdownWidth	sm | md | lg | xl	Default panel width; default sm; overridable per parent via links[].width
dropdownTrigger	navigation.dropdownTrigger	click | hover	Desktop only; default click
ctaLabel	navigation.cta.label	string	—
ctaHref	navigation.cta.href	string	—
ctaSize	navigation.cta.size	sm | md | lg	—
width	— (prop / layout choice)	standard | narrow | wide	Floating bar max-width (not the dropdown panel)

← Navbar versions · Navigation guide · Blocks overview