Pages
Contents
9. Disclosure / Collapse
xpulse-disclosure is the pattern for collapsible areas. Built on native <details>/<summary> — no JavaScript needed.
Standard Disclosure
Release Notes (open)
Ideal for optional extra info, examples or embedded navigation.
Changelog (closed)
This content is collapsed by default.
| <details class="xpulse-disclosure"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-button--block xpulse-disclosure__summary xpulse-text-left"> |
| Title |
| </summary> |
| <div class="xpulse-box xpulse-box--content">Content</div> |
| </details> |
Caret Right (Navigation)
.xpulse-disclosure__summary--caret-right moves the arrow icon to the right — ideal for sidebars.
| <details class="xpulse-disclosure"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-button--block |
| xpulse-disclosure__summary xpulse-disclosure__summary--caret-right xpulse-text-left"> |
| Group |
| </summary> |
| <div class="xpulse-nav xpulse-nav--vertical">...</div> |
| </details> |
Float Dropdown (Horizontal Navigation)
.xpulse-disclosure--float and .xpulse-disclosure__summary--float open the dropdown floating — suited for horizontal menus.
| <details class="xpulse-disclosure xpulse-disclosure--float"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-disclosure__summary |
| xpulse-disclosure__summary--caret-right xpulse-disclosure__summary--float"> |
| Menu item |
| </summary> |
| <div class="xpulse-nav__children">...</div> |
| </details> |
Pill Toggle (Code Examples)
Show code
const theme = 'dark';| <details class="xpulse-disclosure"> |
| <summary class="xpulse-pill xpulse-disclosure__summary">Show code</summary> |
| <pre class="xpulse-code-block"><code>...</code></pre> |
| </details> |