OverflowList

The built-in overflowlist tag — a single-line row of labels that collapses any overflow into a +N counter, re-fitting on resize. Usage, options, and live examples.

A built-in tag for a single-line row of labels (rendered as badges) that collapses any overflow into a trailing “+N” counter when they don’t all fit. It measures the items at runtime and re-fits as the row resizes — narrow the window and watch the counter grow. Hover the counter to see the hidden labels. Pass the labels in items, either comma-separated or as a JSON array.

Use it as {% overflowlist items='A, B, C' %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'overflowlist', …).

A row of labels

The default look: light badges, comma-separated items. Try narrowing the window — the trailing counter grows to absorb whatever no longer fits.

Items as a JSON array

items also accepts a JSON array of strings — handy when a label itself contains a comma.

Badge variant, color, and size

The badges take the usual Mantine variant, color, and size — here filled indigo badges at the large size.

Wider spacing

gap sets the space between badges — a Mantine size token or a px value.

Without the counter tooltip

The hidden labels show in a tooltip on the counter by default. Set withTooltip=false to turn it off — the counter still collapses overflow, just without the hover reveal.

With other components

Drop a row of tags into any other component’s body — here inside a card composed in Python.

Progressive enhancement

Measurement happens in the browser, so before JavaScript runs (and in the build-time prerender) every item shows with no counter — the collapse is pure progressive enhancement. The first item always stays visible even in a very narrow container.

Attributes

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="OverflowList"] — or through the Mantine Styles API classes (.mantine-OverflowList-root and its inner parts):

/* Every rendered OverflowList carries this island marker */
[data-aardvark-island="OverflowList"] { }

/* Mantine Styles API class on the root element */
.mantine-OverflowList-root { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: