File: src/blocks/navbar/Navbar03.astro
Full-bleed sticky header based on Navbar 01, with richer dropdown panels: each child shows a label plus optional short description and optional icon. Dropdown content uses the shared src/components/nav/ stack (same as all navbar versions). For multi-column mega menus with featured images, see Navbar 04. Authoring reference: Navigation guide.
Types: src/lib/nav.ts · Client: src/scripts/navbar.ts
Mobile: hamburger + slide panel; nested items stay a single-column vertical list (with descriptions and icons).
Config (identity.ts → navigation)
Same navigation slice as Navbar 01 / 02, plus dropdownColumns, dropdownWidth, dropdownIconSize, and optional description / icon / iconSize on children (or full sections for mega menus):
// src/config/identity.ts
navigation: {
sticky: true,
dropdownTrigger: "hover", // or "click"
dropdownColumns: 2, // default grid for Navbar 03 (1–4)
dropdownWidth: "lg", // panel width: "sm" | "md" | "lg" | "xl"
dropdownIconSize: 20, // default Lucide px size for child icons
borderBottom: true,
borderThickness: "sm",
borderColor: "soft",
links: [
{ label: "Themes", href: "/themes/" },
// Described dropdown — uses dropdownColumns / dropdownWidth unless overridden
{
label: "Docs",
href: "/docs/", // label links here; chevron opens the menu
columns: 2,
width: "xl", // optional per-parent width override
children: [
{
label: "Get started",
href: "/docs/get-started/",
description: "Install, structure, and first steps.",
icon: "rocket",
},
{
label: "Blocks",
href: "/docs/blocks/",
description: "Full-width sections and version docs.",
icon: "layout-template",
iconSize: 22, // optional per-item override
},
{
label: "Components",
href: "/docs/components/",
description: "UI atoms, containers, and utilities.",
icon: "component",
},
{
label: "Templates",
href: "/docs/templates/",
description: "Theme packaging and buyer overview.",
icon: "package",
},
],
},
{ label: "Pricing", href: "/pricing/" },
],
cta: { label: "Browse themes", href: "/themes/", size: "md" },
},Columns
Resolution order: link.columns → navigation.dropdownColumns → 2.
navigation: {
dropdownColumns: 3,
links: [
{
label: "Product",
columns: 2, // overrides the global 3 for this menu only
children: [
{ label: "Features", href: "/features/", description: "What you get." },
{ label: "Pricing", href: "/pricing/", description: "Plans and licenses." },
],
},
],
},Width
Resolution order: link.width → navigation.dropdownWidth → "lg".
| Preset | Approx. panel width |
|---|---|
sm |
20rem |
md |
28rem |
lg |
40rem (default) |
xl |
56rem |
All presets clamp to 100vw - 2rem on small screens.
navigation: {
dropdownWidth: "lg",
links: [
{
label: "Docs",
width: "xl", // wider panel for this menu only
columns: 2,
children: [/* … */],
},
],
},Icons
Optional Lucide icons (kebab-case from lucide.dev/icons) sit to the left of the label + description, top-aligned.
Resolution order for size: children[].iconSize → navigation.dropdownIconSize → 20.
navigation: {
dropdownIconSize: 20,
links: [
{
label: "Docs",
children: [
{
label: "Blocks",
href: "/docs/blocks/",
description: "Full-width sections and version docs.",
icon: "layout-template",
iconSize: 24, // this item only
},
],
},
],
},Link shapes (Navbar 03)
| Field | Where | Notes |
|---|---|---|
href |
Parent | Optional. With children, the label links here and the chevron opens the menu |
children[].description |
Child | Optional short text under the label |
children[].icon |
Child | Optional Lucide kebab-case name; shown left of title + description |
children[].iconSize |
Child | Optional pixel size; overrides dropdownIconSize |
columns |
Parent | 1 | 2 | 3 | 4 — overrides dropdownColumns |
width |
Parent | sm | md | lg | xl — overrides dropdownWidth |
dropdownColumns |
navigation / prop |
Default column count for all menus |
dropdownWidth |
navigation / prop |
Default panel width for all menus |
dropdownIconSize |
navigation / prop |
Default icon size in px for children with icon |
Navbar 01 / 02 use the same width / dropdownWidth panel controls; they render simpler single-column content from children.
Add to a page
---
import Navbar03 from "@/blocks/navbar/Navbar03.astro";
---
<Navbar03 />Swap in BaseLayout when you want described mega-style dropdowns:
<Navbar03
dropdownColumns={3}
dropdownWidth="xl"
dropdownIconSize={22}
dropdownTrigger="click"
/>Inline links with descriptions:
<Navbar03
dropdownColumns={2}
links={[
{ label: "Home", href: "/" },
{
label: "Product",
columns: 2,
children: [
{
label: "Features",
href: "/features/",
description: "Everything included in the kit.",
icon: "sparkles",
},
{
label: "Pricing",
href: "/pricing/",
description: "Simple plans for teams.",
icon: "badge-dollar-sign",
},
],
},
]}
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
links |
navigation.links |
NavLink[] |
Supports description / icon / iconSize on children; columns / width on parents |
dropdownColumns |
navigation.dropdownColumns |
1 | 2 | 3 | 4 |
Default grid; overridable per parent |
dropdownWidth |
navigation.dropdownWidth |
sm | md | lg | xl |
Panel width; default lg; overridable per parent |
dropdownIconSize |
navigation.dropdownIconSize |
number |
Default icon px size; default 20; overridable per child |
dropdownTrigger |
navigation.dropdownTrigger |
click | hover |
Desktop only; default click |
borderBottom |
navigation.borderBottom |
boolean |
Bottom stroke on/off; default true |
borderThickness |
navigation.borderThickness |
sm | md | lg |
Stroke weight when enabled |
borderColor |
navigation.borderColor |
soft | medium | hard |
Stroke contrast when enabled |
ctaLabel |
navigation.cta.label |
string |
— |
ctaHref |
navigation.cta.href |
string |
— |
ctaSize |
navigation.cta.size |
sm | md | lg |
— |
sticky |
navigation.sticky |
boolean |
Pin the navbar while scrolling |