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/responsi...
• Disclosure (Show/Hide) Pattern: https://www.w3.org/WAI/ARIA/apg/patte...
• Example Disclosure Navigation Menu with Top-Level Links: https://www.w3.org/WAI/ARIA/apg/patte...
• Alpine.js: https://alpinejs.dev/
• Pinegrow Web Editor: https://pinegrow.com

🌐 My Websites:
• https://adamlowe.io
• https://peakperformancedigital.com

✅ Connect with Me:
• Facebook:   / peakperformancedigital  
• LinkedIn:   / peakperformancedigital  
• YouTube:    / @adamloweio  
• Twitter:   / peakperfdigital  
• Instagram:   / 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.