UI Element Mobile Nav

How to make a mobile nav with popover using only browser APIs.

Mobile Nav with No JavaScript

This is a mobile nav using the popover API. The animation is only supported in Chrome currently because it uses @starting-style and allow-discrete. Hopefully these APIs drop across all browsers soon. Either way, check it out, it’s super simple and accessible, with no JavaScript.

Mobile Nav with Popover and View Transitions

Mobile Nav with Popover and WAAPI

Back in reality this is where your front-end framework comes in however you can get a really great animated mobile nav with popover combined with the Web Animations API