Utilizing a seldom-known HTML tag, you can easily create a clickable dropdown menu without JavaScript!
How to Build a Simple HTML Dropdown Menu
The first step is to create the menu. To do this, you will use the <details> tag.
The second step is to create a label for your menu. This label will display and act as your dropdown menu button. To do this, within your <details> tag, use the <summary> tag to establish the label you would like to use for your menu.
The third step is to create your dropdown menu options. To do this, outside the <summary> tag but within the <details> tag, insert the menu contents you would like to be a part of the dropdown menu.
And that's it! You've just created a simple dropdown menu in HTML! See below for a code sample, the appearance of this simple dropdown menu, and tips on customizing it to meet your needs.
HTML Dropdown Menu Sample Code
Here is a code sample showing how the HTML for this simple dropdown menu should look without any additional code:
<details>
<summary>Menu Button</summary>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</details>HTML Dropdown Menu Appearance
Here is how the above code sample would display without any CSS enhancements.
The menu appearance when collapsed:
As you can see, it is a very simple menu. Here, it is expanded to display the options:
Of course, you can add CSS anytime to beautify the menu and customize it to match company branding, etc.
How to Make Your HTML Dropdown Menu Open Automatically
You can also set the menu to open on page load by including an "open" attribute in the details tag. This will give the appearance of a dropdown menu that sits open but can be collapsed by the user at any time, hiding the menu options.
More Details and Summary Tags
Are you looking to learn more about what you can do with tags? Here is a Mozilla developers' with more information on details and summary tags:
<details>: The Details disclosure element - HTML: HyperText Markup Language | MDN
Author: John Baylon
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve an issue, please use the chat and let us know so that we can update this article!