When do you use <details> and <summary> for menus?
Someone was mentioning these HTML-tags and said they are used for hierarchical menus. Is that true? I never heard about these tags. Do you use them really for website menus? I would have guessed these tags are only used for spoiler stuff and to organize text in e.g. patchnotes, roadmaps and stuff like that. What is your opinion?
12 Replies
The
details element is not the right one for dropdown menus, no.
Here's an article on why not. And another. And here's a WAI-ARIA example on how to make one with more semantic elements.On kinda the same subject, I just recently saw that button can have a type: menu! I just use buttons like for hamburger menus. Maybe the same thing would be appropriate for other drop-downs depending on if it’s coming off a menu of course, like subpages
Thank you for the links! The first and third one are the same. But the read was insightful. 🙂
https://www.w3schools.com/tags/tag_button.asp It doesnt list "menu" as a valid value for the type attribute. Hmm...
I only saw it in auto complete which I rarely use, very strange to have in autocomplete and it’s not in mdn . Yeah just some random articles about it
“The button element, having the "menu" value in its type attribute, creates a menu button that when used in a specific combination with other elements (menu, li and menuitem) can aid in the creation of toolbar-type menus.”
“If the type attribute has a value of menu, the menu attribute must be provided in order to specify the element's menu. The value must be the ID of a <menu> element in the same home subtree whose type attribute is in the popup menu state.
The menu attribute can only be used when the type attribute has a value of menu.”
https://www.htmlquick.com/reference/tags/button-menu.html
button (type=menu) element
Collection of HTML5 tutorials and reference. Simple, complete, accessible, easy to navigate and free.
So maybe it’s part of a new spec? Not sure what the deal is
That website doesnt look up to date. I would guess its part of something old and forgotten / obsolete.
This article is over 7 years old: https://web.archive.org/web/20160421174336/https://www.htmlquick.com/reference/tags/button-menu.html
button (type=menu) element
Collection of HTML5 tutorials and reference. Simple, complete, accessible, easy to navigate and free.
that usage of the <menu> element is deprecated
On MDN it does say ”In early versions of the HTML specification, the <menu> element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification” and that “The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items. The related <menuitem> element has been deprecated.”
But the <menu> tag itself isn’t listed as deprecated on mdn.
Then googling it, html.com says “The <menu> element defines a menu. It's designed to help you build pop-up menus using HTML, and is a new element in the HTML 5 specification.”;
While medium says“<menu> was deprecated in HTML 4 Strict for being redundant to UL.”
Then read this “the menu element was deprecated, but it's put back in HTML 5. This is fixed, and the fix should be in the next merge”
Do you mean the usage of <menu> as a context menu (whatever that means), or usage of <button type=“menu”> (which is nowhere to be found in any official or official-adjacent docs)?
any usage of the <menu> element as anything besides an <ul>
Gotcha
”The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items.”