Menu Configuration

Menu Configuration

The menu configuration contract defines the main navigation and utility navigation (footer) structures. The contract lives in two files across the core/ and site/ directories:

• src/core/config/menu.schema.ts (CORE-OWNED) — TypeScript types, interfaces, and DEFAULT_MENU_CONFIG
• src/site/config/menu.ts (SITE-OWNED) — the site-specific instance that overrides defaults

Social links are not part of menu config — they live in Site Configuration at the top level for cross-context reuse.

For the complete field inventory with types and defaults, see src/core/config/menu.schema.ts. This reference documents the system structure, customization pattern, and key design decisions.

Who this is for

• Implementors building header, footer, and mobile navigation components
• Developers customizing navigation for a specific site
• AI agents generating or modifying menu config values

Customization Pattern

The menu instance uses the same spread-override pattern as site config:

// src/site/config/menu.ts (SITE-OWNED)
import { DEFAULT_MENU_CONFIG, type MenuConfig } from "@core/config/menu.schema";

export const menuConfig: MenuConfig = {
  ...DEFAULT_MENU_CONFIG,
  mainNav: [
    { label: "Home", href: "/" },
    { label: "Services", href: "/services/" },
    { label: "Blog", href: "/blog/" },
    { label: "Contact", href: "/contact/" },
  ],
};

Main Navigation

mainNav: MainNavConfig — an ordered array of NavItem objects. Each item has a label, an optional href, and optional children for dropdowns.

Max nesting depth: The type system enforces a max depth of one nested level. children items have label and href only — no further children property. This keeps navigation accessible and keyboard-friendly.

The default config includes placeholder items that exercise all nav patterns — flat links, a dropdown with children, and an external link:

const mainNav = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about/" },
  {
    label: "Dropdown",
    children: [
      { label: "Terms of Use", href: "/terms/" },
      { label: "Privacy Policy", href: "/privacy/" },
    ],
  },
  { label: "Google", href: "https://www.google.com" },
];

Utility Navigation

footerNav: FooterNavConfig — grouped link lists rendered in the footer. Groups include footerNav1, footerNav2, footerNav3, and an optional footerNavLinks array. Each group is an array of { label, href } objects.

Social links are sourced from the top-level socialLinks in site config — they are not duplicated in utility nav.

const footerNav = {
  footerNav1: [
    { label: "Google", href: "https://www.google.com" },
    { label: "Github", href: "https://www.github.com" },
  ],
  footerNav2: [
    { label: "About", href: "/about/" },
    { label: "Contact", href: "/contact/" },
  ],
  footerNav3: [
    { label: "Terms of Use", href: "/terms/" },
    { label: "Privacy Policy", href: "/privacy/" },
  ],
};