File: src/blocks/navbar/Navbar06.astro
Logo + CTA + menu button. Opening the menu reveals a full-viewport takeover with large link type. Nested items use the same accordion + sections / children stack as other navbars.
Types: src/lib/nav.ts · Links: NavOverlayLinks.astro · Client: src/scripts/navbar.ts (overlay mode)
Authoring guide: Navigation components
Behavior
- Menu button opens the overlay; backdrop click, close (×), and Escape close it.
- Large typography for top-level links; nested mega sections stack below when expanded.
- Body scroll locks while open.
Add to a page
---
import Navbar06 from "@/blocks/navbar/Navbar06.astro";
---
<Navbar06 />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
links |
NavLink[] |
site navigation.links |
Same mega/children shapes as Navbar 04 |
contained |
boolean |
false |
Absolute overlay for docs/previews (avoids clipped fixed) |
ctaLabel / ctaHref / ctaSize |
— | from site config | |
sticky |
boolean |
site / true |
|
dropdownIconSize |
number |
site / 20 |
Icons in nested sections |
borderBottom / borderThickness / borderColor |
— | same as Navbar 01 | Header stroke |
For a side drawer instead, see Navbar 05.