Nav

View full screen

Site-wide navigation bar. Logo left, actions right. Fixed height, consistent container alignment with Section. Semantic header + nav landmark.

Default

Logo slot on the left, default slot on the right. Bottom border separates nav from page content. Container aligns with Section.

Without border

bordered={false} removes the bottom separator. Useful when the nav sits above a seamless hero or colored section.

Anatomy

Structural breakdown. The outer <header> wraps a <nav aria-label="Main"> for proper landmark structure. The inner container matches Section's alignment.

Element <header> → <nav aria-label="Main"> → container div
Container max-w-[var(--container-max)] mx-auto px-6
Layout flex items-center justify-between h-16
Height h-16 (64px) — matches spacing-16 token
Border border-b border-border (opt-out via bordered={false})
Slots logo (left) + default (right)