2022-01-23 17:03:03 +07:00
<!doctype html>
< html lang = "en" >
< head >
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
< / head >
< body >
${require('./_nav.html')}
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="dropdowns-link"}
< div role = "document" >
< section id = "dropdown" >
< hgroup >
< h1 > Dropdowns< / h1 >
< h2 > Dropdown menus and custom selects without JavaScript.< / h2 >
< / hgroup >
2022-03-13 21:54:58 +00:00
< p > Dropdowns are built with < code > < < b > details< / b > < i > role< / i > =< u > "list"< / u > > < / code > as a wrapper and < code > < < b > summary< / b > > < / code > and < code > < < b > ul< / b > > < / code > as direct children.< / p >
2022-02-27 22:43:15 +07:00
< p > For style consistency with the form elements, dropdowns are styled like a < a href = "forms.html" > < select> < / a > by default.< / p >
< article aria-label = "Dropdowns as Selects" >
2022-02-28 01:57:59 +07:00
< details role = "list" >
2022-01-23 17:03:03 +07:00
< summary aria-haspopup = "listbox" > Dropdown< / summary >
< ul role = "listbox" >
2022-02-28 01:57:59 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
2022-01-23 17:03:03 +07:00
< / ul >
< / details >
< select required >
< option value = "" disabled selected > Select< / option >
2022-02-27 22:43:15 +07:00
< option > Option< / option >
< option > Another option< / option >
< option > Something else here< / option >
2022-01-23 17:03:03 +07:00
< / select >
< footer class = "code" >
< pre > < code > < em > < !-- Dropdown --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
2022-02-27 22:43:15 +07:00
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
2022-01-23 17:03:03 +07:00
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Select --> < / em >
< < b > select< / b > < / u > >
< < b > option< / b > < i > value< / i > =< u > ""< / u > < i > disabled selected< / i > > Select< /< b > option< / b > >
< < b > option< / b > > …< /< b > option< / b > >
< /< b > select< / b > >
< / code > < / pre >
< / footer >
< / article >
2022-02-28 01:57:59 +07:00
< p > < code > < < b > summary< / b > < i > role< / i > =< u > "button"< / u > > < / code > transforms the dropdown into a button.< / p >
2022-02-27 22:43:15 +07:00
< article aria-label = "Dropdowns as Buttons" >
2022-01-23 17:03:03 +07:00
< details role = "list" >
< summary aria-haspopup = "listbox" role = "button" > Dropdown as a button 1< / summary >
< ul role = "listbox" >
2022-02-28 01:57:59 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
2022-01-23 17:03:03 +07:00
< / ul >
< / details >
< details role = "list" >
< summary aria-haspopup = "listbox" role = "button" class = "secondary" > Dropdown as a button 2< / summary >
< ul role = "listbox" >
2022-02-28 01:57:59 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
2022-01-23 17:03:03 +07:00
< / ul >
< / details >
< details role = "list" >
< summary aria-haspopup = "listbox" role = "button" class = "contrast" > Dropdown as a button 3< / summary >
< ul role = "listbox" >
2022-02-28 01:57:59 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
2022-01-23 17:03:03 +07:00
< / ul >
< / details >
< footer class = "code" >
< pre > < code > < em > < !-- Primary --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > >
Dropdown as a button 1
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
2022-02-27 22:43:15 +07:00
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
2022-01-23 17:03:03 +07:00
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Secondary --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary"< / u > >
Dropdown as a button 2
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
2022-02-27 22:43:15 +07:00
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
2022-01-23 17:03:03 +07:00
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- Contrast --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "contrast"< / u > >
Dropdown as a button 3
< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
2022-02-27 22:43:15 +07:00
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
2022-01-23 17:03:03 +07:00
< /< b > ul< / b > >
< /< b > details< / b > >
< / code > < / pre >
< / footer >
< / article >
2022-01-23 17:40:56 +07:00
< p > Dropdowns can be used as custom selects with < code > < < b > input< / b > < i > type< / i > =< u > "radio"< / u > > < / code > or < code > < < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > > < / code > < / p >
2022-02-27 22:43:15 +07:00
< article aria-label = "Dropdowns with radio buttons or checkboxes" >
2022-01-23 17:03:03 +07:00
< details role = "list" >
< summary aria-haspopup = "listbox" > Select single element< / summary >
< ul role = "listbox" >
< li >
< label for = "small" >
< input type = "radio" id = "small" name = "size" value = "small" / >
Small
< / label >
< / li >
< li >
< label for = "medium" >
< input type = "radio" id = "medium" name = "size" value = "medium" / >
Medium
< / label >
< / li >
< li >
< label for = "large" >
< input type = "radio" id = "large" name = "size" value = "large" / >
Large
< / label >
< / li >
< / ul >
< / details >
< details role = "list" >
< summary aria-haspopup = "listbox" > Select multiple elements< / summary >
< ul role = "listbox" >
< li >
< label >
< input type = "checkbox" / >
Banana
< / label >
< / li >
< li >
< label >
< input type = "checkbox" / >
Watermelon
< / label >
< / li >
< li >
< label >
< input type = "checkbox" / >
Apple
< / label >
< / li >
< / ul >
< / details >
< footer class = "code" >
< pre > < code > < em > < !-- With radio buttons --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "small"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "small"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "small"< / u > >
Small
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "medium"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "medium"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "medium"< / u > >
Medium
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > < i > for< / i > =< u > "large"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "large"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "large"< / u > >
Large
< /< b > label< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< em > < !-- With checkboxes --> < / em >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Banana
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Watermelon
< /< b > label< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > >
Apple
< /< b > label< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< / footer >
< / article >
2022-02-28 01:57:59 +07:00
< p > Dropdowns can be used inside a < a href = "navs.html" > < nav> < / a > with a nested < code > < < b > details< / b > < i > role< / i > =< u > "list"< / u > > < / code > < / p >
2022-03-06 09:37:03 +07:00
< p > Example with a dropdown as a link:< / p >
2022-02-27 22:43:15 +07:00
< article aria-label = "Dropdowns inside a nav" >
< nav >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li >
< details role = "list" dir = "rtl" >
2022-03-06 09:37:03 +07:00
< summary aria-haspopup = "listbox" role = "link" > Dropdown< / summary >
2022-02-27 22:43:15 +07:00
< ul role = "listbox" >
2022-02-28 01:57:59 +07:00
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
2022-02-27 22:43:15 +07:00
< / ul >
< / details >
< / li >
< / ul >
< / nav >
< footer class = "code" >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > < i > dir< / i > =< u > "rtl"< / u > >
2022-03-06 09:37:03 +07:00
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "link"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / footer >
< / article >
< p > Example with a default dropdown and a dropdown as a button:< / p >
< article aria-label = "Dropdowns inside a nav" >
< nav >
< ul >
< li >
< details role = "list" >
< summary aria-haspopup = "listbox" > Dropdown< / summary >
< ul role = "listbox" >
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
< / ul >
< / details >
< / li >
< li >
< details role = "list" >
< summary aria-haspopup = "listbox" role = "button" > Dropdown< / summary >
< ul role = "listbox" >
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
< / ul >
< / details >
< / li >
< / ul >
< / nav >
< footer class = "code" >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > summary< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< /< b > li< / b > >
< < b > li< / b > >
< < b > details< / b > < i > role< / i > =< u > "list"< / u > >
2022-02-28 09:21:28 +07:00
< < b > summary< / b > < i > aria-haspopup< / i > =< u > "listbox"< / u > < i > role< / i > =< u > "button"< / u > > Dropdown< /< b > summary< / b > >
2022-02-27 22:43:15 +07:00
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > details< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / footer >
< / article >
2022-02-28 01:57:59 +07:00
< p > You can also use < code > < < b > li< / b > < i > role< / i > =< u > "list"< / u > > < / code > as a nested wrapper to render a list as a dropdown.< / p >
< p > ℹ ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.< / p >
< article aria-label = "Dropdowns inside a nav" >
< nav >
< ul >
< li > < strong > Brand< / strong > < / li >
< / ul >
< ul >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Link< / a > < / li >
< li role = "list" dir = "rtl" >
< a href = "#" onclick = "event.preventDefault()" aria-haspopup = "listbox" > Dropdown< / a >
< ul role = "listbox" >
< li > < a href = "#" onclick = "event.preventDefault()" > Action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Another action< / a > < / li >
< li > < a href = "#" onclick = "event.preventDefault()" > Something else here< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
< footer class = "code" >
< pre > < code > < < b > nav< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > strong< / b > > Brand< /< b > strong< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< < b > ul< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > < i > href< / i > =< u > "#"< / u > > Link< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > < i > role< / i > =< u > "list"< / u > < i > dir< / i > =< u > "rtl"< / u > >
< < b > a< / b > < i > href< / i > =< u > "#"< / u > < i > aria-haspopup< / i > =< u > "listbox"< / u > > Dropdown< /< b > a< / b > >
< < b > ul< / b > < i > role< / i > =< u > "listbox"< / u > >
< < b > li< / b > > < < b > a< / b > > Action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Another action< /< b > a< / b > > < /< b > li< / b > >
< < b > li< / b > > < < b > a< / b > > Something else here< /< b > a< / b > > < /< b > li< / b > >
< /< b > ul< / b > >
< /< b > li< / b > >
< /< b > ul< / b > >
< /< b > nav< / b > > < / code > < / pre >
< / footer >
< / article >
2022-01-23 17:03:03 +07:00
< / section >
${require('./_footer.html')}
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
