Components / Layout & Navigation / Collapsible
Collapsible stable
One disclosure on its own: a trigger row and the region it folds away. The Accordion is this, grouped.
Advanced options
<details class="k-coll"> <summary>Advanced options <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary> <div class="k-coll-body">Caching, retries and the webhook secret live here — the settings a form needs once, not every time. The fold is native: no script, and the browser keeps the state.</div> </details>
/* KATA Collapsible — one native details, styled as a row. */
.k-coll{font-family:var(--k-font);color:var(--k-ink);max-width:460px}
.k-coll summary{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--k-line);border-radius:var(--k-radius);font-size:13.5px;font-weight:550;cursor:pointer;list-style:none;background:var(--k-bg)}
.k-coll summary::-webkit-details-marker{display:none}
.k-coll summary:hover{background:var(--k-bg-soft)}
.k-coll summary svg{margin-inline-start:auto;transition:transform .18s;color:var(--k-ink-3)}
.k-coll[open ] summary{border-radius:var(--k-radius) var(--k-radius) 0 0}
.k-coll[open ] summary svg{transform:rotate(180deg)}
.k-coll-body{border:1px solid var(--k-line);border-top:0;border-radius:0 0 var(--k-radius) var(--k-radius);padding:13px;font-size:13px;line-height:1.75;color:var(--k-ink-2)}
@media (prefers-reduced-motion:reduce){.k-coll summary svg{transition:none}}
Installation
CLI
node kata-ui.mjs add collapsible
Writes the part’s CSS into your project. New to the CLI? See the CLI doc.
Manual
- Load
tokens.cssonce, before any part. - Copy the CSS tab into your stylesheet.
- Copy the HTML where it belongs.
Examples
Open by default
What is in the box
<details class="k-coll" open> <summary>What is in the box <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary> <div class="k-coll-body">The part, its CSS, and the small script if it has one. Nothing phones home afterwards.</div> </details>
As a settings row
Danger zone
<details class="k-coll"> <summary>Danger zone <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary> <div class="k-coll-body">Deleting the workspace removes every project in it. The fold is the last soft warning before the hard one.</div> </details>
Usage
For the single "show more" a page needs once — advanced options, a long answer, the fine print. It is a native details element: no script, and it stays exactly as open or closed as the markup says. For a stack of them, use Accordion.
Accessibility
The summary is a real disclosure control: keyboard-operable, with its state announced. Keep the trigger text meaningful on its own ("Advanced options", not "More").
Anatomy
The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.
.k-coll | class |
.k-coll-body | class |
aria-hidden | ARIA |
Related parts
Accordion beta
Disclosure built on native <details>. Zero JavaScript, keyboard and find-in-page included.
Bottom Navigation stable
The mobile app tab bar: three to five destinations under the thumb, the current one lit with the core.
Breadcrumbs beta
Where you are, as a path. The last crumb is the page itself — not a link.
Menubar beta
The desktop menu bar: File, Edit, View — menus that open on click and slide sideways while open, with the shortcuts showing.