Create a dropdown menu using  tag with no Javascript

Create a dropdown menu using
tag with no Javascript

24th March 2019 0 By Azadeh

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 (<details>) 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 <summary> element.

From respective MDN page

This is a simple semantic of how it looks like:

    <summary>System Requirements</summary>
    Something small enough to escape casual notice.

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.

An example of details tag

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:

See the Pen Dropdown meus using <details> tag by Azadeh Faramarzi (@azad6026) on CodePen.

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.