> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overflow - Web

> Overflow manages excess content with scrollable areas and optional expand/collapse functionality.

> [!NOTE]
>
> For development, import `Overflow` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=2088-20624).

![](https://mintcdn.com/servicetitan/mUSuIbu4js-UtGZd/images/docs/web/components/overflow/overview-image.png?fit=max\&auto=format\&n=mUSuIbu4js-UtGZd\&q=85\&s=1cc3a051ab19cf7f33e2cd8d427f1287)

## Anatomy

The Overflow consists of three primary elements that work together to manage content that exceeds available space.

![Anatomy of the Overflow component](https://mintcdn.com/servicetitan/mUSuIbu4js-UtGZd/images/docs/web/components/overflow/design/overflow-anatomy.png?fit=max\&auto=format\&n=mUSuIbu4js-UtGZd\&q=85\&s=f7816fc6dfcd9669adc0d770edf7455a)

1. **Content area** - The scrollable container that holds the overflow content
2. **Expand button** (Optional) - A button that appears when truncation is enabled, allowing users to expand or collapse content

## Options

The Overflow supports the following configurations to accommodate various content overflow scenarios.

### Direction

overflow-direction-column

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-direction-column?file=src/App.tsx)

```tsx lines theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Overflow gap="4" height={200}>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <Card
          key={i}
          justifyContent="center"
          alignItems="center"
          style={{ minWidth: 100, minHeight: 100 }}
        >
          <Text el="h4" variant="headline" size="xlarge">
            {i + 1}
          </Text>
        </Card>
      ))}
    </Overflow>
  );
}

export default App;
```

overflow-direction-row

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-direction-row?file=src/App.tsx)

```tsx lines theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ maxWidth: "calc(100vw - 4rem)" }}>
      <Overflow direction="row" gap="4">
        {[
          0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
        ].map((i) => (
          <Card
            key={i}
            justifyContent="center"
            alignItems="center"
            style={{ minWidth: 100, minHeight: 100 }}
          >
            <Text el="h4" variant="headline" size="xlarge">
              {i + 1}
            </Text>
          </Card>
        ))}
      </Overflow>
    </div>
  );
}

export default App;
```

Overflow supports both vertical and horizontal scrolling. Vertical scrolling is the default, suitable for most content that exceeds available height. Horizontal scrolling displays content in a row layout, useful for wide content that exceeds available width.

### Truncation

overflow-truncate

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-truncate?file=src/App.tsx)

```tsx lines theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Overflow direction="column" gap="4" height={200} truncate>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <Card
          key={i}
          justifyContent="center"
          alignItems="center"
          style={{ minWidth: 100, minHeight: 100 }}
        >
          <Text el="h4" variant="headline" size="xlarge">
            {i + 1}
          </Text>
        </Card>
      ))}
    </Overflow>
  );
}

export default App;
```

When truncation is enabled, Overflow displays a "Show more..." button when content exceeds the visible area. Users can expand to view full content or collapse to return to the truncated view. Truncation is only available when direction is set to column. Custom expand and collapse text can be configured, along with optional callbacks for expand and collapse events.

## Behavior

The Overflow responds to content overflow with scrollable areas and visual indicators that adapt to the scroll position.

### Scrollable content

The content area becomes scrollable when content exceeds the specified height or width. Users can scroll using mouse, touch, or keyboard navigation. The scrollable area maintains focus for keyboard accessibility, allowing users to navigate through overflow content using arrow keys.

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoConstrained-space long content | Display long content within a constrained space without breaking the page layout |
| DoScrollable variable-length content | Provide scrollable areas for content that varies in length |
| DoOn-demand expandable sections | Offer expandable content sections that users can reveal on demand |
| DoHorizontal content overflow | Handle horizontal content overflow, such as wide tables or lists |
| Don'tCritical content | Essential information should be immediately visible without requiring scrolling or expansion |
| Don'tShort content | Content that fits naturally within available space does not need overflow handling |
| Don'tNavigation elements | Use dedicated navigation components like Tabs or Side Nav for organizing navigation content |

### Alternatives

#### Overflow vs Details

Overflow provides scrollable areas for content that exceeds space, while Details provides collapsible sections for showing or hiding supplementary information. Use Overflow when content must remain accessible through scrolling. Use Details when content can be completely hidden until the user chooses to reveal it.

## Content

Content within the Overflow should be structured to work effectively within scrollable or expandable containers. Ensure that important information appears early in the content when truncation is enabled, as users may not expand to view all content.

## Keyboard Interaction

Users can navigate the Overflow using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Moves focus to the next focusable element |
| Arrow keys | Scrolls the content area when the Overflow container has focus |
| Space or Enter | Activates the expand/collapse button when truncation is enabled |

## Code

**Implementation**

## Live Component Playground

overflow-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-playground?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Overflow, Radio } from "@servicetitan/anvil2";

function App() {
  return (
    <Overflow
      direction="column"
      gap="4"
      height={200}
      truncate={{
        expandText: "Show more...",
        collapseText: "Show less...",
      }}
    >
      <Radio.Group legend="Choose fruit(s)" required>
        <Radio name="fruit" value="Citron" label="Citron" />
        <Radio name="fruit" value="Clementine" label="Clementine" />
        <Radio name="fruit" value="Grapefruit" label="Grapefruit" />
        <Radio name="fruit" value="Kumquat" label="Kumquat" />
        <Radio name="fruit" value="Lemon" label="Lemon" />
        <Radio name="fruit" value="Lime" label="Lime" />
        <Radio name="fruit" value="Minneola" label="Minneola" />
        <Radio name="fruit" value="Orange" label="Orange" />
        <Radio name="fruit" value="Pomelo" label="Pomelo" />
        <Radio name="fruit" value="Satsuma" label="Satsuma" />
        <Radio name="fruit" value="Tangerine" label="Tangerine" />
        <Radio name="fruit" value="Tangelo" label="Tangelo" />
        <Radio name="fruit" value="Ugli" label="Ugli" />
        <Radio name="fruit" value="Tangor" label="Tangor" />
        <Radio name="fruit" value="Yuzu" label="Yuzu" />
      </Radio.Group>
    </Overflow>
  );
}

export default App;
```

## Common Examples

```tsx theme={null}
import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Overflow truncate height="5rem">
      {/* Overflow Content */}
    </Overflow>
  );
}
```

### Overflow any elements

By default, the `Overflow` component creates a vertically scrolling area with a shadow to indicate which directions it can be scrolled.

overflow-direction-column

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-direction-column?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Overflow gap="4" height={200}>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <Card
          key={i}
          justifyContent="center"
          alignItems="center"
          style={{ minWidth: 100, minHeight: 100 }}
        >
          <Text el="h4" variant="headline" size="xlarge">
            {i + 1}
          </Text>
        </Card>
      ))}
    </Overflow>
  );
}

export default App;
```

#### Horizontal overflow

To apply the overflow effect horizontally, add `direction="row"` to the `Overflow` component:

overflow-direction-row

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-direction-row?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ maxWidth: "calc(100vw - 4rem)" }}>
      <Overflow direction="row" gap="4">
        {[
          0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
        ].map((i) => (
          <Card
            key={i}
            justifyContent="center"
            alignItems="center"
            style={{ minWidth: 100, minHeight: 100 }}
          >
            <Text el="h4" variant="headline" size="xlarge">
              {i + 1}
            </Text>
          </Card>
        ))}
      </Overflow>
    </div>
  );
}

export default App;
```

#### Overflow truncation

To display a "Show more..." button, you can add the `truncate` prop. For more custom use cases, `truncate` can also accept an object to specify custom expand/collapse display text and custom event handlers.

overflow-truncate

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/overflow-truncate?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Overflow, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Overflow direction="column" gap="4" height={200} truncate>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <Card
          key={i}
          justifyContent="center"
          alignItems="center"
          style={{ minWidth: 100, minHeight: 100 }}
        >
          <Text el="h4" variant="headline" size="xlarge">
            {i + 1}
          </Text>
        </Card>
      ))}
    </Overflow>
  );
}

export default App;
```

**Overflow Props**

```tsx theme={null}
import { Overflow } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<Overflow direction="column" height="5rem" width="100%" truncate={false}>
  {/* Overflow content */}
</Overflow>
); }

```

## `Overflow` Props

In addition to the props listed below, the `Overflow` component can accept any valid HTML `div` props:

**contentRef** `Ref\<HTMLDivElement\>`

Ref to the scrollable content element (the inner element with `overflow: auto`). The component's own `ref` points at the outer wrapper, which does not scroll, so use `contentRef` when an integration must target the actual scroller — e.g. a virtualizer's `getScrollElement`, an `IntersectionObserver` sentinel, or programmatic scrolling.

**direction** `CSSProperties[flexDirection]` (default: column)

Accepts [CSS `flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction) values.

**height** `number | string`

**truncate** `boolean | \{ expandText?: string; collapseText?: string; onExpand?: (e: MouseEvent) =\> void; onCollapse?: (e: MouseEvent) =\> void \}`

The `truncate` prop can only be used with `direction` set to `"column"`.

**width** `number | string`


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.