Using the dialog element for an off canvas menu
👋 everyone!
Do you think using the <dialog> element for creating an off canvas menu is a smart move?
I wanted to take advantage of all the built-in functions that come with <dialog>, like esc key, focus, backdrop etc.
I’m a bit conflicted in regards of a11y for example is it good or I better go the <div> way? Or perhaps there’s something else that might be a problem?! 🤔
6 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@Deleted User said everything I would have.
Thanks for the replies.
Yes, that’s what I’m looking for, for a good starting point for a11y and not having to write a lot of extra js to handle open/closing etc.
Do you think browser support is good enough to ship a menu using this approach early next year?
Menus are a pretty sensitive part of a website.
Pretty much full compatibility:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#browser_compatibility
: The Dialog element - HTML: HyperText Markup Language | MDN
The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
Nothing to worry about
Thanks! Btw I saw there’s also a dialog-polyfill that also can be used just in case 🧘🏻♂️ nice