Dropdown JS

This is the old version, if modern browser check the [/components/popover](Popover component)

@use '@natachah/vanilla-frontend/scss/components/dropdown';

Syntax

The dropdown is using a <div> tag with the class .dropdown-js. Inside of the element you must add a <button> and another <div> or an <ul/ol> tag.

html

<div class="dropdown-js">
    <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
        Dropdown
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>
    </button>
    <ul id="myDropdown" tabindex="0" hidden>
        <li><a href="#">Subitem</a></li>
        <li><a href="#">Subitem</a></li>
        <li><a href="#">Subitem</a></li>
    </ul>
</div>

css properties

--dropdown-color
--dropdown-background
--dropdown-border-size
--dropdown-border-style
--dropdown-border-color
--dropdown-border-radius
--dropdown-padding-inline
--dropdown-padding-block
--dropdown-transition
--dropdown-decoration
--dropdown-outline-size
--dropdown-outline-style
--dropdown-outline-color
--dropdown-outline-offset
--dropdown-hover-color
--dropdown-hover-background
--dropdown-hover-border-color
--dropdown-focus-color
--dropdown-focus-background
--dropdown-focus-border-color
--dropdown-active-color
--dropdown-active-background
--dropdown-active-border-color
--dropdown-disabled-opacity
--dropdown-transition
--dropdown-svg-transform
--dropdown-index
--dropdown-offset

js

import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
const dropdowns = document.querySelectorAll('.dropdown-js')
if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))

To work properly the <button> of the dropdown must have an aria-controls="IdOfTheContent", an aria-expanded and an aria-pressed attributes.

You can also add some <button> or <a role="button"> into the list to make them look as a vertical group.

Variants

You can group some dropdown by putting them in a <div> with the class .group.

html

<div class="group">
    <div class="dropdown-js">
        <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
            Dropdown A
        </button>
        <div id="myDropdownA" tabindex="0" hidden>
            <p>AAA</p>
        </div>
    </div>
    <div class="dropdown-js">
        <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
            Dropdown B
        </button>
        <div id="myDropdownB" tabindex="0" hidden>
            <p>BBB</p>
        </div>
    </div>
    <div class="dropdown-js">
        <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
            Dropdown C
        </button>
        <div id="myDropdownC" tabindex="0" hidden>
            <p>CCC</p>
        </div>
    </div>
</div>

scss

@use '@natachah/vanilla-frontend/scss/components/group';

Javascript

This component require some javascript, to use it you must import the Toggle file and create a new Toggle object.

new Toggle(myDropdown, {
    closable:false // The ability to close the dropdown when click outside
})

Events

Event name	Description	Value
dropdown:changed	When toggle the <button>	isOpen as a boolean

const dropdown = document.getElementById('myDropdown')
dropdown.addEventListener('dropdown:changed', (e) => {
    const isDropdownOpen = e.detail.isOpen
})