Building Responsive and Accessible Navigation Menus with Alpine.js

Navigation menus are one of those components where most people either copy what someone else has done or try to make it themselves and get it wrong. In this video, we create a fully responsive and accessible navigation menu using nothing but HTML, CSS, and the Alpine.js library. 📖 Video Transcript and Blog Post: Coming Soon… 🧰 Resources: • GitHub Project Files: https://github.com/adamslowe/responsive-accessible-alpine-menu • Disclosure (Show/Hide) Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ • Example Disclosure Navigation Menu with Top-Level Links: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/ • Alpine.js: https://alpinejs.dev/ • Pinegrow Web Editor: https://pinegrow.com 🌐 My Websites: • https://adamlowe.io • https://peakperformancedigital.com ✅ Connect with Me: • Facebook: https://www.facebook.com/peakperformancedigital/ • LinkedIn: https://www.linkedin.com/company/peakperformancedigital • YouTube: https://www.youtube.com/channel/UCrFyA8spcuzlhLVYrrhhUdQ • Twitter: https://www.twitter.com/peakperfdigital • Instagram: https://www.instagram.com/peakperformancedigital/ ⚙️Tools I Use: • WordPress.org: https://wordpress.org/ • Pinegrow Website Editor: https://pinegrow.com/ ⌚ Timestamps: 00:00:00 - Intro 00:02:28 - ARIA Authoring Practices 00:06:35 - The Finished Project 00:07:29 - Prep the project and CSS 00:13:36 - Prep page placeholder 00:18:36 - Header Layout 00:28:44 - Main Menu Top Level 00:42:44 - Main Menu Submenu 00:54:27 - Mobile Menu 01:11:37 - Hamburger Button Actions 01:18:49 - Submenu Interactions 01:28:17 - Making a WordPress Menu 01:35:31 - Outro 📝Note: I'm not affiliated with Pinegrow in any way. I'm just a happy, paying customer who wants to see the product continue to grow and thrive, and to help build a more active community around it.