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

Pass a tree to tree; clicking a level opens its panel, clicking a leaf 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>
  );
}

Requires Chrome 125+ for CSS anchor positioning.

API Reference

High-level Components

Ready-to-use composite components.

A multi-level cascading selector driven by a tree; panels default to 18rem width via styles.panel, and the internally managed anchor props 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

CascaderNode

Node structure for the cascader tree.

Field	Type	Default	Description
`value`	`string`	-	Unique value for the node
`label`	`string`	-	Display text for the node
`children`	`CascaderNode[]`	-	Child nodes for the next level

Composable Components

CascaderTrigger

A breadcrumb-style trigger button; the composite renders one per level.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom CSS class
`...props`	`React.ComponentProps<"button">`	-	Supports all native button props

Cascader

On this page