Overflow - Web

For development, import Overflow from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

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

Content area - The scrollable container that holds the overflow content
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 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

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
Overflow Props

Live Component Playground

Common Examples

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.

Horizontal overflow

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

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.

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:

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.

CSSProperties[flexDirection]

default:"column"

Accepts CSS flex-direction values.

number | string

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".

number | string

Concepts & Guidelines

Anvil2

Resources

Overflow - Web

Anatomy

Options

Direction

Truncation

Behavior

Scrollable content

Usage Guidelines

Alternatives

Overflow vs Details

Content

Keyboard Interaction

Code

Live Component Playground

Common Examples

Overflow any elements

Horizontal overflow

Overflow truncation

`Overflow` Props

​Anatomy

​Options

​Direction

​Truncation

​Behavior

​Scrollable content

​Usage Guidelines

​Alternatives

​Overflow vs Details

​Content

​Keyboard Interaction

​Code

​Live Component Playground

​Common Examples

​Overflow any elements

​Horizontal overflow

​Overflow truncation

​Overflow Props

Anatomy

Options

Direction

Truncation

Behavior

Scrollable content

Usage Guidelines

Alternatives

Overflow vs Details

Content

Keyboard Interaction

Code

Live Component Playground

Common Examples

Overflow any elements

Horizontal overflow

Overflow truncation

`Overflow` Props