Go back to the GitHub repository.
To use, wrap one (or more!) <details> elements in our <details-utils> web component. Mix and match these utilities as needed:
Click outside to close
Toggle Menu
Note that interacting with content inside of the menu works without closing the menu. Like this
Use a close button inside of the content.
Animate Open and Close
This attribute is ignored if (prefers-reduced-motion) preference is detected.
Toggle Menu
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
This is the content.
Force State
Force State based on JavaScript availability
Open without JavaScript, closed with JavaScript:
Default open
This is the content.
Close without JavaScript, open with JavaScript:
Default closed
This is the content.
If both force-open force-close are added, the state is toggled.
Default closed
This is the content.
Default open
This is the content.
Force State based on Viewport size
Resize your viewport to see state change.
force-close="(min-width: 768px)". Optionally use force-restore to restore previous state when media query doesn’t match.
Force close at large viewport
This is the content.
force-open="(max-width: 767px)". Optionally use force-restore to restore previous state when media query doesn’t match.
Force open at small viewport
This is the content.
Both force-close="(max-width: 767px)" and force-open="(min-width: 768px)" (without force-restore)
Close at small, Open at large viewport
This is the content.
Close by esc Key
Toggle Menu
This is the content.
Close by esc based on Viewport size
close-esc="(max-width: 767px)" will only close when viewport is smaller than 767px.
Toggle Menu
This is the content.
Toggle Document Class
Useful if you want to make styling changes higher up in the page hierarchy.
Toggle Menu
This is the content.
This is the content.
This is the content.