Cascader

A multi-level cascading selector driven by a tree, built from a breadcrumb-style trigger and popover panels positioned via CSS anchor positioning

Installation

$npx litefy@latest add cascader

$pnpm dlx litefy@latest add cascader

$yarn dlx litefy@latest add cascader

$bun --bun litefy@latest add cascader

Usage

Basic Usage

Pass a tree structure to tree; clicking a level opens the corresponding panel beneath the field, while clicking a leaf closes the panel and completes the selection.

California
New York
Texas
Washington

"use client";
import { Cascader, type CascaderNode } from "@/ui";

const tree: CascaderNode[] = [
  {
    value: "california",
    label: "California",
    children: [
      {
        value: "los-angeles",
        label: "Los Angeles",
        children: [
          { value: "downtown", label: "Downtown" },
          { value: "hollywood", label: "Hollywood" },
          { value: "pasadena", label: "Pasadena" },
        ],
      },
      {
        value: "san-francisco",
        label: "San Francisco",
        children: [
          { value: "soma", label: "SoMa" },
          { value: "richmond", label: "Richmond" },
          { value: "sunset", label: "Sunset" },
        ],
      },
    ],
  },
  {
    value: "new-york",
    label: "New York",
    children: [
      {
        value: "new-york-city",
        label: "New York City",
        children: [
          { value: "manhattan", label: "Manhattan" },
          { value: "brooklyn", label: "Brooklyn" },
        ],
      },
    ],
  },
  {
    value: "texas",
    label: "Texas",
    children: [
      {
        value: "houston",
        label: "Houston",
        children: [
          { value: "midtown", label: "Midtown" },
          { value: "uptown", label: "Uptown" },
        ],
      },
    ],
  },
  {
    value: "washington",
    label: "Washington",
    children: [
      {
        value: "seattle",
        label: "Seattle",
        children: [
          { value: "ballard", label: "Ballard" },
          { value: "fremont", label: "Fremont" },
        ],
      },
    ],
  },
];

export default function CascaderBasicDemo() {
  return (
    <div className="flex flex-col items-center gap-3">
      <Cascader tree={tree} />
    </div>
  );
}

Notes

The trigger is styled like a breadcrumb but uses plain buttons with ChevronRight instead of the Breadcrumb component, since breadcrumb semantics are for page navigation.
Panels render inline with popover="manual" (the top layer escapes ancestor overflow clipping) and are anchored to their corresponding trigger buttons via CSS anchor positioning.
Chrome 125+ is required for CSS anchor positioning.

A multi-level cascading selector driven by a tree. It renders one breadcrumb-style trigger per level and anchors each level's panel to its trigger via CSS anchor positioning. Clicking a parent level opens the next level's panel below the field; selecting a leaf closes the panels and the full path is shown across the triggers. Panel sizing is customizable via styles.panel (default width 18rem) and classNames.panel. The anchor props (anchorName / positionAnchor) are managed internally and always take precedence over styles.

Prop	Type	Default	Description
`tree`	`CascaderNode[]`	-	Tree data driving the cascading selection
`placeholder`	`string`	`"Select your location"`	Trigger text shown before anything is selected
`className`	`ClassNameValue`	-	Custom classes for the root container
`classNames`	`{ trigger?: ClassNameValue; panel?: ClassNameValue }`	-	Custom classes for the triggers and panels
`styles`	`{ trigger?: React.CSSProperties; panel?: React.CSSProperties }`	-	Inline styles for the triggers and panels
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props (except `children`, `className`), spread onto the root container