<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
Note that interacting with content inside of the menu works without closing the menu.
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.
Use this to disable overflow: hidden on the document. Styling to make the content take up the entire viewport is up to you. Definitely pair this with the close-esc utility. In this demo, modal styles require JavaScript (this is not mandatory).