Navbar 04

File: src/blocks/navbar/Navbar04.astro

Full-bleed sticky header (same chrome family as Navbar 01 / 03) documented for multi-section mega menus. All navbar versions share the same panel stack in src/components/nav/; this page shows the modular sections config.

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

Authoring guide: Navigation components covers every section type, children short form, widths, icons, and recipes. This page is the live mega-menu demo.

Modular sections

Each dropdown parent can use:

• children — short form; becomes one links or icon-links section via resolveNavSections
• sections — mix featured image, icon lists, and plain lists, each with an optional title
• titleStroke — optional soft underline under a section title (border-line-soft)

Section titles render at 10px, uppercase, muted.

Config example

// src/config/identity.ts
navigation: {
  sticky: true,
  dropdownTrigger: "hover",
  dropdownIconSize: 20,
  borderBottom: true,
  links: [
    { label: "Themes", href: "/themes/" },
    {
      label: "Docs",
      href: "/docs/",
      width: "xl",
      sections: [
        {
          type: "featured",
          title: "Featured",
          titleStroke: true,
          image: "/images/nav/featured.webp",
          imageAspect: "16/10",
          label: "Get started",
          href: "/docs/get-started/",
          description: "Install, structure, and first steps.",
        },
        {
          type: "icon-links",
          title: "Explore",
          titleStroke: true,
          items: [
            {
              label: "Blocks",
              href: "/docs/blocks/",
              description: "Full-width sections and version docs.",
              icon: "layout-template",
            },
            {
              label: "Components",
              href: "/docs/components/",
              description: "UI atoms, containers, and utilities.",
              icon: "component",
            },
          ],
        },
        {
          type: "links",
          title: "More",
          titleStroke: true,
          items: [
            { label: "Customize", href: "/docs/customize/" },
            { label: "Site config", href: "/docs/site-config/" },
          ],
        },
      ],
    },
  ],
  cta: { label: "Browse themes", href: "/themes/", size: "md" },
},

Multi-section panels default to width xl unless you set link.width. Single-section menus use dropdownWidth (default lg on Navbar 03 / 04).

Components

Navbar 01–03 use the same components; only chrome differs.

Add to a page

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

<Navbar04 />

Props

Same as Navbar 03 (dropdownWidth, dropdownIconSize, border props, etc.). Panel content comes from links[].sections or links[].children.

← Navbar versions · Navigation guide · Blocks overview