Independent Footer Menu — Different Links in Header and Footer

Until now, the footer in Astro Rocket reused the same links as the header. That’s fine for a small site, but most blogs want the footer to do something different — show legal pages like Privacy and Terms, or surface less prominent links that don’t deserve a spot in the main nav.

The footer menu is now configured independently from the header. You can keep the header focused on your primary navigation while the footer holds everything else.

What changed

There are now three exports in src/config/nav.config.ts:

• navItems — the header menu (unchanged)
• footerNavItems — the footer menu, configured separately
• legalLinks — small legal-style links rendered in the footer’s bottom row

By default, footerNavItems mirrors navItems so existing sites look identical. You only need to edit it when you want the footer to differ.

How to add a Privacy link to the footer only

Open src/config/nav.config.ts and edit the footerNavItems array:

export const footerNavItems: NavItem[] = [
  { label: 'Blog', href: '/blog', order: 1 },
  { label: 'Projects', href: '/projects', order: 2 },
  { label: 'About', href: '/about', order: 3 },
  { label: 'Contact', href: '/contact', order: 4 },
  { label: 'Privacy', href: '/privacy', order: 5 },
];

The header stays untouched. The footer now has the extra link.

Using the legal links row

For Privacy/Terms/Imprint-style links, the footer has a separate “legal” row that some layouts (columns, stacked) render in a dedicated bottom strip. Add them to legalLinks:

export const legalLinks: LegalLink[] = [
  { label: 'Privacy', href: '/privacy' },
  { label: 'Terms', href: '/terms' },
  { label: 'Imprint', href: '/imprint' },
];

These render as small, muted links in the footer’s bottom-right corner. They don’t appear in the header.

Two ways to override per page

If you want a specific page to use a different footer menu (rare, but possible), the <Footer /> component still accepts a nav prop and a legalLinks prop. They override the config:

<Footer
  nav={[{ label: 'Home', href: '/' }]}
  legalLinks={[{ label: 'Privacy', href: '/privacy' }]}
/>

When you don’t pass them, the config takes over.

What about external links?

NavItem now has an optional external?: boolean field. Set it to true (or use a https:// URL) and the link opens in a new tab with rel="noopener noreferrer":

{ label: 'GitHub', href: 'https://github.com/you', order: 5, external: true }

Where it shows up

The new behaviour is wired into all four footer layouts — simple, columns, minimal, and stacked. Existing sites get the same links they had before; new sites only edit one file when they want the footer to differ from the header.

That’s it. One file, one extra array, full control over the bottom of the page.