# Collapsible row > The dashboard grew to sixty panels and the viewer needs the top twelve most of the time. - Canonical: https://patterns.konigi.com/dashboards/collapsible-row - Group: Screenspace - Level: implementation - Status: published - Updated: September 10, 2026 - Also called: panel group, section accordion --- ## Problem The dashboard has sixty panels. Four of them are what anyone looks at on an ordinary day, and the other fifty-six exist for the one afternoon a quarter when they are the only thing that matters. ## Solution Group panels into named sections and let each collapse. Collapsed by default for the deep material, expanded for the summary, and the state remembered. This is progressive disclosure, and NN/g's rule for it is the useful part: show only a few of the most important options first, and get the split right, so people progress to the secondary display only on rare occasions. On a dashboard the split is easy to state and hard to do—the top section should answer "is it okay", and everything below should answer "why", and most dashboards get this backwards by opening with whatever was built first. The counter-argument is worth taking seriously, because NN/g makes it against accordions in the same breath. Scrolling is cheap; deciding which heading to click is not. Readers treat clicks like currency and resent spending them on content they needed anyway. Hiding content behind navigation reduces awareness that it exists at all. Both are true, and the reconciliation is the section title. A row labelled "Advanced" hides its contents from everyone forever. A row labelled "Disk and filesystem" is a promise specific enough that someone chasing a disk problem will spend the click. The titles are the whole design, and they are usually an afterthought. The other thing that decides it: does an alert inside a collapsed row still reach the viewer? A page that looks healthy because the unhealthy part is folded away is worse than a long page. ## Use when The panel count exceeds a screen, the sections have genuinely different audiences or occasions, and the top of the page can stand alone as a summary. ## Don't use when Every panel matters every time, which means you have a shorter dashboard than you think you do. Also don't use it to make an overloaded page feel tidy; the load is still there and now it is hidden. ## Trade-offs Collapsed content is close to invisible, and the panels that get folded are the ones that then rot unnoticed. Expand-all becomes necessary and then becomes the thing everyone clicks first, which means the collapsing bought nothing. In-page search doesn't reach collapsed content in most implementations, so a viewer looking for a panel by name finds nothing. And collapse state is per-viewer, so no two people are looking at the same dashboard, which makes screen-sharing during an incident quietly confusing. ## Checklist - Does the section title say what is inside, specifically enough to be worth a click? - Which rows are collapsed by default, and does the open set answer "is it okay"? - Is the collapse state remembered, and is it per-viewer or per-dashboard? - Does a panel in a collapsed row still run its query, and should it? - If something inside a collapsed row is alerting, does the row say so? - Does browser find, or the product's search, reach collapsed panels? - Is there an expand-all, and does everyone use it immediately? - On a wallboard, does anything start collapsed that nobody can expand? - Does a shared link carry the expansion state? - Would splitting into separate dashboards serve these audiences better? ## Compare **Grafana** makes rows first-class objects with their own titles, collapse state and repeat-by-variable behaviour, so a row can expand into one section per instance, which is the pattern doing real structural work rather than only tidying. **Datadog** groups panels into named sections that collapse, and surfaces alert status on the group header so a folded section can still say something is wrong. **AWS CloudWatch** leans on separate dashboards instead of sections, which sidesteps the hiding problem and replaces it with a navigation problem. **Netdata** builds the entire page as collapsible sections driven by a menu, and because the section list doubles as the navigation the titles are load-bearing in a way most implementations never make them. ## Related Panel grid is what sits inside a row. Detail on demand is the same idea applied to a single panel. Dense small-multiple layout is the alternative that shows everything and asks the viewer to scan. Semantic grouping is what should decide the sections. Multi-page dashboard is the heavier answer when sections stop being enough. ## Examples ### Netdata Per-second charts, hundreds per node, with a per-chart anomaly ribbon instead of a band on the series. **Metrics / System › Compute › CPU** — captured September 10, 2026, Netdata Agent (public registry node, signed out). operational, dense density, dark theme, desktop-web. Further down the same generated page, and the section nesting is the thing to look at: "− Compute", then "−− CPU", then "−− Pressure Stall Information (PSI)", then "−−− CPU", then "−−−− Some Pressure". Four levels, each collapsible, each named by the collector rather than by a person, and the depth is signalled with leading dashes because there was no design pass to give them a hierarchy in type. It is consistent and completely unedited. Every chart also carries its own query builder in the header—group by, aggregation, node count, dimension count, sample interval—so a panel here is a live query you can re-scope in place rather than a saved configuration. Worth noting what is not in this shot: the sidebar has an Anomaly Rate toggle, switched off, and Netdata's answer to the anomaly problem is a separate derived rate per chart rather than a band drawn around the series. This capture shows the control, not the thing it draws. Hotspots in this capture: - [Collapsible row](https://patterns.konigi.com/dashboards/collapsible-row) *(this pattern)* — Four levels of section, depth carried by leading dashes. Generated by the collector, and never edited. - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) — Six arcs. Two are percentages where the endpoints mean something; four are rates in KiB/s and kbit/s on an invented maximum. - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) — The legend is a value table: steal 0.1, softirq 0, user 1.5113, system 0.9, iowait 0.1, each with its own bar. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A query builder in every chart header, so the panel is a live query rather than a saved configuration. - [Overview then detail](https://patterns.konigi.com/dashboards/overview-then-detail) — System › Compute › CPU. The breadcrumb is the only thing telling you where in 720 charts you are. ## Related patterns - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) — Many independent panels need to share one screen without fighting for it. - [Detail on demand](https://patterns.konigi.com/dashboards/detail-on-demand) — A small panel needs to become a big one for a moment. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — An expert wants everything on one screen and will trade legibility for it. - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Panels belong together by meaning, and the layout should say so. - [Multi-page dashboard](https://patterns.konigi.com/dashboards/multi-page-dashboard) — One page can't hold it and the sections have different audiences. ## Sources - [Nielsen Norman Group, Accordions Are Not Always the Answer for Complex Content](https://www.nngroup.com/articles/accordions-complex-content/) - [Nielsen Norman Group, Progressive Disclosure](https://www.nngroup.com/articles/progressive-disclosure/) - [Grafana, Create a dashboard](https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dashboard/) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.