Header and Navigation

Header and navigation behavior is split across data and components:

• src/data/navigation.ts
• src/components/layout/Header.astro
• src/components/layout/TopBar.astro
• src/components/layout/MobileNavigation.astro
• src/components/common/Logo.astro

Navigation Data

Use src/data/navigation.ts for labels, paths, dropdown groups, and call-to-action links where the theme exposes them. Confirm the exact export shape before editing.

Example only:

export const navigation = [
  { label: 'Practice Areas', href: '/practice-areas/' },
  { label: 'Attorneys', href: '/attorneys/' },
  { label: 'Insights', href: '/insights/' },
  { label: 'Contact', href: '/contact/' },
];

Component Responsibilities

Header.astro usually controls desktop header layout.

TopBar.astro usually displays secondary contact or announcement content.

MobileNavigation.astro usually controls compact navigation for small screens.

Inspect typed props at the top of each Astro component before changing usage. Props define what the component expects from parent components.

Testing

Test keyboard navigation, mobile menu open and close behavior, long labels, active links, and external links.