feat: add dynamic menu with astro content

[itziarZG]

Description
This PR implements the main navigation bar for the PyConES 2026 website. The menu is data-driven, fully responsive, and built with accessibility best practices in mind.

• Key Changes
  New Component (Nav.astro): Created the main header component containing:
  Desktop navigation with hover/focus-triggered dropdowns.
  Mobile navigation with a hamburger toggle menu.
  Backdrop blur and sticky positioning.
  Data-Driven Menu: Configured an Astro Content Collection (menu) to manage navigation items via src/content/menu/main.json. This makes updating links easier without touching the component logic.
  Layout Integration: Updated src/layouts/Layout.astro to include the "Nav" component globally.

• Accessibility & UX:
  Implemented full keyboard navigation support (using :focus-within for CSS-only dropdowns on desktop).
  Added proper ARIA attributes (aria-expanded, aria-controls).
  Added Escape key support to close menus.
  Added "Click outside" logic to close the mobile menu.

• Technical Details
  Schema: Defined a Zod schema in src/content/config.ts allowing for nested children items (dropdowns).
  Styling: Used Tailwind CSS for styling and state management (group-hover, focus-visible).
  Scripting: Minimal client-side JS added to handle the mobile toggle and specific accessibility edge cases (Esc key).

• Testing

• Verified that the mobile menu opens/closes correctly.

• Verified that desktop dropdowns appear on hover and tab focus.

• Checked that the menu data is correctly loaded from the JSON file.

[ctrl-alt-d]

Accessibility issues identified

These are the most significant accessibility issues identified.

1. Menu keyboard behavior does not follow the expected ARIA pattern

The current menu implementation does not respect the expected keyboard interaction behavior defined in the WAI-ARIA Authoring Practices for menu / menubar components.

According to the specification, menu components must support:

• Opening submenus using Enter, Space, or arrow keys
• Navigating menu items using arrow keys
• Closing menus using Escape
• Proper focus management and correct aria-expanded state updates

This behavior is formally defined here:
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

Deviating from this pattern results in inconsistent and unexpected behavior for keyboard users and screen reader users.

As a reference, this page includes an example of a navigation menu that follows well-established accessibility patterns and expected keyboard behavior. It can be useful as a practical comparison when reviewing or updating the current implementation:

https://getbootstrap.com/docs/5.3/components/navbar/#supported-content

---

2. Missing “Skip to main content” link (bypass blocks)

The page is missing an initial “Skip to main content” link that allows keyboard and screen reader users to bypass the navigation menu and jump directly to the main content.

This link should:

• Be the first focusable element on the page
• Move focus directly to the first relevant element inside the <main> landmark

This requirement is defined in WCAG under Bypass Blocks (2.4.1):
https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html

Implementation guidance and examples are available here:
https://www.w3.org/WAI/test-evaluate/easy-checks/skip-link/

<a
  href="#main-content"
  class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 z-50 bg-white text-black px-4 py-2 rounded shadow"
>
  Skip to main content
</a>

<main id="main-content" class="flex-grow">

[francescarpi]

The design is really impressive. I love it, but I would like to have more splitted components. For instance, to have a generic Button component, or Menu, MenuItem, etc...

[ctrl-alt-d]

What about taking a look at https://www.npmjs.com/package/astro-navbar ? If it fits the design requirements, I can evaluate its accessibility conformance. MIT license.

[itziarZG]

@ctrl-alt-d
We dont have design yet, so it would be great if you can take a look accessibility with astro-navbar
. Pabckage is not update since 7 month.

[ctrl-alt-d]

Astro Navbar ruled out: I reported the accessibility issues in this repository issue: surjithctly/astro-navbar#37