Jasonlav
KPCKevin Powell - Community
•Created by Jasonlav on 8/12/2024 in #front-end
Should the HTML5 dialog tag be used for a toggleable responsive navigation menu?
It is common practice to have the primary website navigation always visible on larger devices (desktop and tablet) and shown/hidden with a toggle button ("hamburger menu") on smaller devices (mobile).
Is it proper to use the HTML5
dialog element for this type of responsive navigation?
Dialog Pros
1. dialog elements include a native keyboard trap. When a dialog is open, the tab index is isolated to the contents of the dialog, greatly improving the keyboard navigation experience.
2. dialog elements include native functionality to close model with the escape button.
3. dialog elements include native functionality to restore focus to the previously focused element when the modal is closed.
4. dialog elements include native functionality for a backdrop behind the modal.
5. dialog elements convey the intention of element to the browser allowing the browser to potentially render an element in the best possible way for the device. For example, select elements are rendered different on desktop browser than mobile browsers.
Dialog Cons
1. There could be SEO implications to placing the primary navigation in a dialog element. In an effort to circumvent possible consequences, the dialog element includes the open attribute.
2. The dialog element is technically never opened on larger devices. Instead, the dialog element is set to display: block. If the dialog is opened (dialog.show()) when the browser width increases, it causes the focus to change. The display:block; hack, circumvents the issue. This an atypical implementation could cause issues on some devices.
Example
https://codepen.io/jasonlav/pen/LYKOYEm16 replies