Home

• Description

  A lightweight, accessible navigation and content system built using the native HTML <details> and <summary> elements.

  Enhances the default behavior with JavaScript for better usability, keyboard support, and ARIA state management — without relying on external libraries.

• Features

  • Native <details> used for dropdown menus in navigation and content.
  • Automatic closing of <details> when clicking outside a navigation area.
  • Keyboard support: pressing Escape closes the currently focused <details>.
  • ARIA attributes (aria-expanded) synchronized with open/close state.
  • Implements grouped accordion behavior using the data-group attribute: when one <details> in a group opens, any others in the same group automatically close.
  • Responsive hamburger menu with accessible ARIA controls.
  • Modern CSS Anchor Positioning used for aligning dropdown menus.
• JavaScript

  • details.js: Handles <details> accessibility and behavior.
    • Syncs aria-expanded between <summary> and <details>.
    • Closes dropdowns when clicking outside navigation.
    • Implements grouped accordion behavior using the data-group attribute: when one <details> in a group opens, any others in the same group automatically close.
    • Supports closing via the Escape key and restores focus.
  • hamburger-button.js: Toggles the mobile navigation menu.
    • Updates aria-expanded on the button.
    • Switches between hidden/visible menu states.
    • Updates the visually hidden text for screen readers.
• CSS

  • Anchor Positioning (position-anchor) is used to align dropdown menus relative to their <summary>.

    • In browsers without Anchor Positioning support (e.g., Firefox), the layout gracefully falls back to a standard flow layout, preserving an unbroken user experience.

  • Uses media query range syntax for responsive breakpoints.

  • Mobile-first design, with progressive enhancements for larger viewports.
  • Dropdown menus adapt to available space without JavaScript intervention.
  • WCAG AAA color contrast is maintained for light and dark themes.
  • CSS custom properties are used for easy theming.
• Accessibility

  • ARIA attributes (aria-expanded) dynamically updated on all <summary> elements.
  • Escape key support: closes the open <details> and returns focus to its <summary>.
  • Clicking outside a <nav> closes only its dropdown menus.
  • Mobile hamburger menu includes aria-controls and aria-expanded for screen reader support.
  • Semantic HTML structure (<header>, <nav>, <main>, <details>, <summary>) aids navigation for assistive technologies.
• Caniuse anchor positioning?

  As of September 2025, Caniuse reports that the following browsers/platforms support anchor positioning:

  • Chrome v.140
  • Edge v.140
  • Opera v.122
  • Chrome for Android v.139
  • Safari on IOS v.26
  • Android Browser v.139

  Caniuse reports that "All major browser engines are working on implementing this spec.".

  Caniuse: anchor positioning

  Note: unsupported browsers/platforms will display the default details behaviour.

• Testing and Compatibility

  The application has been tested on the following platforms and browsers:

  • Operating System: Windows 10
  • Browsers:
    • Google Chrome (full support, including Anchor Positioning)
    • Mozilla Firefox (no Anchor Positioning support yet, but layout gracefully falls back to default <details> behavior)
    • Microsoft Edge (full support, including Anchor Positioning)

  Device View Testing

  The layout and functionality have been verified in both browser and device simulation views to ensure responsiveness and usability.

• Code source

  The anchor positioning code for the main navigation comes from a Codepen by Ryan Trimble. My only changes were:

  • Changing IDs to classes
  • Adding position-try-fallbacks: flip-block, flip-inline to the target's ::details-content
  • Making both targets position-area: block-end center

  View CodePen