This codebase features a series of releases demonstrating building an accessible navigation component for React. Each release builds upon the last, and is presented alongside a series of articles on DEV explaining the concepts.

This repository has been built with Typescript on React 19 and Next.JS 16 and will remain so. Where used, some of the base components are composed from Adobe React Aria Components.

As explained in the articles, this repository is presented as a demonstration, rather than a third party component, but the code is released under an MIT license and you are free to use it as the basis of your own navigation component.

You will need the latest version of Yarn (at least 4.12)

Once you've downloaded the repository run the following in a terminal in the project root. yarn yarn build yarn dev

You will now have a fully working example site located at localhost:3000/

Each published article is linked, and where appropriate, examples will refer to the appropriate GitHub tag to download and follow along.

1. Hunting For an Accessible React Navigation Component
2. Spacing Considerations in Accessible Design
3. Foundational Accessibility Begins with Base Components
4. Theming in the modern age
5. Structure and Transformation
6. Single List Keyboard Handling
7. Laying it all Out
8. Are You My Parent?: Scaffolding in the architecture necessary for keyboard handling between components.
9. Laying it all out on the vertical
10. The Ups and Downs of Keyboard Handling (available 06/04/2026)
11. Navigating with Tabs (available 06/09/2026)
12. Styling with Color (available 06/11/2026)
13. Focus Issues and Refinement Support (available 06/16/2026)
14. The Ins and Outs of Closings (available 06/18/2026)
15. Styling the Vertical - Achieving Parity (available 06/23/2026)
16. Setting Up a Controlled Component (available 06/25/2026)
17. Vertical Layout Considerations (available 06/30/2026)