🎓 Details dropdown

What I wanted: A dropdown menu that would allow me to click on a link. Similar idea to a traditional <select> with options but without the form or JavaScript being involved.

Solution

Remembering that GitHub tends to have this sort of UI element - for example, when adding a reaction to a comment - I had a look to see how it was done.

From memory they use a <details> tag, which was where I started. I could not find any resources online about how to make sure that when the <details> was open, the additional content did not shift the UI.

Looking at the CSS that GitHub use I came up with a stripped down version.

<style>  
    .dropdown {  
        position: relative;  
    }  
  
    .dropdown > summary {  
        cursor: pointer;  
    }  
  
    .dropdown-menu {  
        position: absolute;  
        list-style: none;  
        padding: 0;  
        margin-block: 0.5rem;  
    }  
</style>  
  
<details class="dropdown">  
    <summary>Pick an option</summary>  
    <ul class="dropdown-menu">  
        <li>Option 1</li>  
        <li>Option 2</li>  
        <li>Option 3</li>  
    </ul>  
</details>