KP-C

Kevin Powell - Community•2y ago•

16 replies

Jasonlav

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

dialog

element for this type of responsive navigation?

Dialog Pros

1.

dialog

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

dialog

elements include native functionality to close model with the escape button.
3.

dialog

dialog

elements include native functionality to restore focus to the previously focused element when the modal is closed.
4.

dialog

dialog

elements include native functionality for a backdrop behind the modal.
5.

dialog

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

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()

dialog.show()

) when the browser width increases, it causes the focus to change. The

display:block;

display:block;

hack, circumvents the issue. This an atypical implementation could cause issues on some devices.

Example

https://codepen.io/jasonlav/pen/LYKOYEm

CodePenJason Lav

Simple Dialog Hamburger Example

...