Library · Navigation

Header / Standard

The house header: logo left, nav centre, phone (accent serif) + pill CTA right. Burger + slide-down panel below 900px. Canonical reference for all header variants.

Figma: Header / Standard ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import HeaderStandard from "../components/figma/HeaderStandard.astro";

const nav = [
  { label: "Home", href: "#", current: true },
  { label: "For Sale", href: "#" },
  { label: "About Us", href: "#" },
  { label: "Testimonials", href: "#" },
  { label: "Contact Us", href: "#" },
];
---
<HeaderStandard
  logoText="Logoipsum"
  navItems={nav}
  phone="07 3123 4567"
  ctaLabel="Enquire Now"
  ctaUrl="#"
/>
<HeaderStandard
  logoText="Logoipsum"
  navItems={nav}
  phone="07 3123 4567"
  ctaLabel="Enquire Now"
  ctaUrl="#"
  tone="primary"
/>
<HeaderStandard logoText="Logoipsum" navItems={nav} tone="neutral" />
<p class="caption">
  Burger menu appears below 900px viewport width — resize the browser to test
  (media queries are viewport-based, not container-based). Tones mirror the
  Figma colour-variant axis; also try the ThemePanel presets.
</p>

Props

Name	Type	Required	Description
`logoText`	`string`	—	Text logo (rendered when no logoImage).
`logoImage`	`string (url)`	—	Image logo — overrides logoText.
`logoAlt`	`string`	—	Alt text for the image logo.
`logoUrl`	`string`	—	Logo link target (default '/').
`navItems`	`NavItem[]`	Yes	Nav links: { label, href, current? }.
`phone`	`string`	—	Phone number, shown desktop-right and in the mobile panel.
`ctaLabel`	`string`	—	Pill CTA label.
`ctaUrl`	`string`	—	Pill CTA link.
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral" \| "transparent"`	—	Background tone — mirrors the Figma colour-variant axis (default base-100).
`sticky`	`boolean`	—	position: sticky at the top of the viewport.