Items With More
FreeRenders N items then collapses the overflow into a "+N more" badge, chip or text indicator — with an optional dropdown listing the hidden items and automatic width-based overflow.
Complexity tier: Primitive Presents a value: held to semantic markup and contrast, with its right-to-left and print gaps recorded and the right-to-left debt allowed only to shrink.
import { SvItemsWithMoreComponent } from '@styloviz/display';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Auto width overflow
<sv-items-with-more [items]="tags" [autoOverflow]="true" moreVariant="chip" />
Keeping the one that matters
Overflow collapses by position, which assumes the list is ordered by importance. It usually is not — an "Overdue" chip appended to eight labels is the one the reader needed, and it is the first thing a narrow container hides. A pinned item is taken out of that race; if more are pinned than fit, every one is still shown and the row wraps, because a flag that means "unless it is inconvenient" is worse than no flag at all.
readonly tags = [ { label: 'Design' }, { label: 'Engineering' }, { label: 'Overdue', pinned: true }, { label: 'Support' }, ];
maxVisible is the split before measurement
A server has no layout, so autoOverflow cannot measure during a prerender. It used to show everything and collapse on the first client frame — a layout jump on the first paint of every auto-overflow row. maxVisible is now the split until a measurement exists, because it is a number the server has too: both renders agree and hydration changes nothing.
<sv-items-with-more [items]="tags" [autoOverflow]="true" [maxVisible]="4" />
When to use
- Showing a few items inline and collapsing the rest into a "+N more" affordance.
- Avatar stacks, tag rows, attendee lists where space is limited.
- For a full expandable text block, use Line Clamp instead.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | readonly (string | ItemsWithMoreItem)[] | [] | Items to display. Strings or objects with a `label` field. |
| maxVisible | number | 3 | How many items to show before collapsing (inline variant). |
| moreLabel | string | '+{n} more' | Template for the overflow indicator. Use `{n}` as placeholder. |
| moreVariant | MoreVariant | 'badge' | Style variant for the overflow indicator. |
| moreDropdown | boolean | false | Show overflow items in a dropdown when clicking the indicator. |
| autoOverflow | boolean | false | Auto-detect overflow: measure how many items fit on a single line and collapse the rest. Responds to container width changes via ResizeObserver. `maxVisible` is **no longer ignored** when this is on — it is the split used until measurement is possible. See `_effectiveMax`. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| moreClick | (string | ItemsWithMoreItem)[] | Emitted when the "+N more" button is clicked. Payload = overflow items. |
Customization & theming
- Cap visible items with `maxVisible` or let `autoOverflow` measure available width — `maxVisible` is also the split used until a measurement exists, which is every server render.
- Pick the indicator style with `moreVariant` (badge, chip, text) and `moreLabel`.
- Enable `moreDropdown` to reveal hidden items inline, or handle `moreClick` yourself.
- Mark an item `pinned: true` and it is never collapsed into the overflow, wherever it sits in the list. `svSplitOverflow(items, max)` is exported if you need the same split elsewhere.
Best practices
- Do: Prefer `autoOverflow` so the cutoff adapts to the actual container width.
- Do: Expose the hidden items via the dropdown or `moreClick` — never just hide them.
- Tip: Match `moreVariant` (badge/chip/text) to the surrounding item style.
- Do: Set `maxVisible` even with `autoOverflow` on. It is the split used during a prerender and before the first measurement, so it is what decides whether the first paint matches the second.
- Do: Pin the item whose absence would mislead — a status, a warning, an owner. Position is not importance.
- Don't: Don't pin most of the list. Pinned items are never collapsed, so the row simply wraps and the component stops doing the job you added it for.
Accessibility
- The "+N more" indicator is a labelled, focusable button that exposes `aria-expanded`/`aria-controls` when it opens a dropdown.
- Its accessible name **names the hidden items**, not just how many: "+3 more" says three things are hidden and nothing about whether the one you came for is among them — and with `moreDropdown` off, which is the default, there is no panel to open to find out. Past five names it goes back to counting, because a label that reads out forty tags is one nobody listens to the end of.
- Opening the dropdown moves focus into the panel; Escape closes it and returns focus to the trigger — or to the component itself if the trigger has since been removed by a resize.
- If the container widens so that everything fits, the "+N more" control is destroyed. When it held focus, focus lands on the component rather than falling to the top of the page, and the change is announced politely.
- The panel is a labelled list ("N more items"); the item count is conveyed to assistive tech.
Feedback on Items With More
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.