Create a dropdown menu using details tag with no Javascript

Did you know we could create a dropdown menu using only HTML5 tag called details? If you don’t then read on as it is getting more attention and there is no Javascript involved. But what is details tag and how it works.

Details tag as a descriptive element

According to MDN :

The HTML Details Element (

) creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the  element.

This is a simple semantic of how it looks like:

<details>
 &nbsp; &nbsp; <summary>System Requirements</summary>
 &nbsp; &nbsp; Something small enough to escape casual notice.
 </details> 

Basically the details tag always comes with summary tag as a label. If you remove summary, the “Details” text will be shown instead. Also we will see a triangle as a symbol of a disclosure widget which can be open and close.

Therefore they can be very useful creating dropdown menus inside the navigation bar. This is a pen I created to demonstrate it a bit more:

We could click on any of the triangles and it opens up the sub menu. Each of the menu links are wrapped by a details tag. The summary holds the label of the tag which could be a link itself.

In the above example contact tab is not a link itself but it has a dropdown menu with a link inside.

The services tab has a dropdown called about us and that as well has a dropdown with links. We see how flexible it could be and will solve problems we used to have with non clickable menu links or having menu labels also clickable as well.

Summary tag

In addition to details tag we need to know about summary tag. We specify the label of the details tag inside summary tag. In other words, summary tag defines what the details tag about. By the way details tag is an element to give us more information about something that is not visible by default and could be shown on demand.

Therefore we could actually use details and summary tag to create powerful and semantic accordions. Without writing extra Javascript codes we are able to create menus and accordions when needed.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.