Library · Navigation

Nav / Mega Footer Sitemap

Multi-column footer sitemap navigation for large sites (distinct from the contact/brand footers), with an optional legal + copyright row. Columns reflow responsively. Tone via the shared contract.

Figma: Nav / Mega Footer Sitemap ↗

Live preview — edit theme bottom-right

---
import NavFooterSitemap from "../components/figma/NavFooterSitemap.astro";
---
<NavFooterSitemap
  tone="neutral"
  copyright="© 2026 iCreate Agency"
  legalLinks={[
    { label: "Privacy", href: "/privacy" },
    { label: "Disclaimer", href: "/disclaimer" },
  ]}
  columns={[
    { heading: "Projects", links: [
      { label: "Current releases", href: "#" },
      { label: "Coming soon", href: "#" },
      { label: "Sold", href: "#" },
    ] },
    { heading: "About", links: [
      { label: "Our story", href: "#" },
      { label: "The team", href: "#" },
      { label: "Careers", href: "#" },
    ] },
    { heading: "Buyers", links: [
      { label: "How to buy", href: "#" },
      { label: "Finance", href: "#" },
      { label: "FAQs", href: "#" },
    ] },
    { heading: "Contact", links: [
      { label: "Enquire", href: "#" },
      { label: "Display suite", href: "#" },
      { label: "Newsletter", href: "#" },
    ] },
  ]}
/>

Props

Name	Type	Required	Description
`columns`	`SitemapColumn[];`	Yes	Link columns
`legalLinks`	`SitemapLink[];`	—	Optional legal links row
`copyright`	`string;`	—	Optional copyright line
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<NavFooterSitemap
  tone="neutral"
  copyright="© 2026 iCreate Agency"
  legalLinks={[{ label: "Privacy", href: "/privacy" }]}
  columns={[
    { heading: "Projects", links: [{ label: "Current releases", href: "#" }] },
    { heading: "About", links: [{ label: "Our story", href: "#" }] },
  ]}
/>