Layout & navigation

AppScrollbar

A thin, themed scrollbar for a scrollable region — pure CSS, no dependency.

<app-scrollbar max-height="220">…</app-scrollbar>

<app-scrollbar> wraps a scrollable region with a thin, themed scrollbar instead of the browser's chunky default. Native scroll, keyboard navigation, and in-page anchoring all keep working — only the visible track is restyled. It is pure CSS (native scrollbar-width / ::-webkit-scrollbar), so there is no JavaScript and no dependency.

It applies the same .wui-scroll class as the React <AppScrollbar>, so both surfaces render an identical thin track from the shared @webority/theme.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the box above it.

  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
<app-scrollbar max-height="220" style="width:280px;">
  <!-- vertical overflow content -->
</app-scrollbar>
max-height is the only thing that triggers the scrollbarWithout a max-height (or a parent that constrains height), the container simply grows to fit its content and no scrollbar appears — it is the overflow, not the component, that decides.

Basic

Give it a max-height so its content overflows, then scroll — the thin themed track replaces the browser default.

A capped list
Content taller than max-height scrolls inside the container; the page around it does not move.
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
Show code 
<app-scrollbar max-height="220">
  <ul>
    @for (int i = 1; i <= 24; i++)
    {
      <li>Row @i</li>
    }
  </ul>
</app-scrollbar>
It is a container, not a page-level behaviorReach for it on a specific scrollable region — a dropdown menu body, a side panel, a card with a long list — not on the whole page. The browser's own scrollbar is the right choice for page-level scrolling.

When to use

Use it when

  • A fixed-height region (dropdown, side panel, card body) can overflow and you want a thin, unobtrusive scrollbar instead of the browser default.
  • The native scrollbar visually clutters a dense UI (a chunky gutter next to narrow content).

Reach for something else when

  • Scrolling the whole page. → the native page scrollbar
  • A region that should paginate instead of scroll. → AppTablePagination

Every option

The whole surface of the component — every form max-height can take, both scroll axes, and the passthrough attributes.

max-height — every form

max-height="160" — bare digits, auto-unit to px
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
max-height="30vh" — viewport unit
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
max-height="100%" — parent must constrain height
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
(no max-height) — grows to fit content, no scrollbar
  • Row 1
  • Row 2
  • Row 3
  • Row 4

overflow direction

vertical only — tall content, fixed width
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
horizontal only — wide row, no max-height
Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12
both axes — tall and wide content together
  • Row 1 — long enough to force horizontal scroll too
  • Row 2 — long enough to force horizontal scroll too
  • Row 3 — long enough to force horizontal scroll too
  • Row 4 — long enough to force horizontal scroll too
  • Row 5 — long enough to force horizontal scroll too
  • Row 6 — long enough to force horizontal scroll too
  • Row 7 — long enough to force horizontal scroll too
  • Row 8 — long enough to force horizontal scroll too
  • Row 9 — long enough to force horizontal scroll too
  • Row 10 — long enough to force horizontal scroll too
  • Row 11 — long enough to force horizontal scroll too
  • Row 12 — long enough to force horizontal scroll too
  • Row 13 — long enough to force horizontal scroll too
  • Row 14 — long enough to force horizontal scroll too
  • Row 15 — long enough to force horizontal scroll too
  • Row 16 — long enough to force horizontal scroll too
  • Row 17 — long enough to force horizontal scroll too
  • Row 18 — long enough to force horizontal scroll too
  • Row 19 — long enough to force horizontal scroll too
  • Row 20 — long enough to force horizontal scroll too
  • Row 21 — long enough to force horizontal scroll too
  • Row 22 — long enough to force horizontal scroll too
  • Row 23 — long enough to force horizontal scroll too
  • Row 24 — long enough to force horizontal scroll too
no overflow — content fits, scrollbar absent
  • Row 1
  • Row 2
  • Row 3

class & style

class="my-scroll" — appended alongside wui-scroll
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
style merged with max-height
  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24

Attributes

AttributeTypeDefaultDescription
max-heightstring—Caps the container height so overflow triggers the scrollbar. Any CSS length; a bare number is treated as pixels.

The scrollable content is the tag's inner markup. Add your own class / style — they are merged onto the container alongside .wui-scroll.