<details-utils>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:
Note that interacting with content inside of the menu works without closing the menu. Like this
This attribute is ignored if (prefers-reduced-motion) preference is detected.
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.
Open without JavaScript, closed with JavaScript:
This is the content.
Close without JavaScript, open with JavaScript:
This is the content.
If both force-open force-close are added, the state is toggled.
This is the content.
This is the content.
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.
This is the content.
force-open="(max-width: 767px)". Optionally use force-restore to restore previous state when media query doesn’t match.
This is the content.
Both force-close="(max-width: 767px)" and force-open="(min-width: 768px)" (without force-restore)
This is the content.
esc KeyThis is the content.
esc based on Viewport sizeclose-esc="(max-width: 767px)" will only close when viewport is smaller than 767px.
This is the content.
Useful if you want to make styling changes higher up in the page hierarchy.
This is the content.
This is the content.
This is the content.