Cascader

Material Design 3 multi-level dropdown selection with horizontal panels

Cascader

Cascader is a multi-level dropdown component that displays options in horizontal adjacent panels. Each selection reveals the next level of options, making it ideal for hierarchical data like location (Country → State → City), categories, or organizational structures. Uses the native HTML Popover API for dropdown behavior.

Basic Usage

Basic Cascader

With Selection

Display the selected path in the trigger:

Cascader with Selection

With Panel Headers

Add headers to identify each level:

Cascader with Headers

Category
Subcategory

Variants

Outlined (Default)

Outlined Cascader

Filled

Filled Cascader

Sizes

Small

Small Cascader

Large

Large Cascader

Cascader with Search

States

Error State

Error State

Location
Please select a location

Disabled

Disabled State

Loading

Loading State

Leaf-Only Selection

Options without arrows are leaf nodes (final selection):

Leaf Selection

API Reference

Class Names

Class Description
.cascader Base container (required)
.cascader-trigger Trigger button (use with popovertarget)
.cascader-value Selected value display
.cascader-placeholder Placeholder text when empty
.cascader-path Path breadcrumb display
.cascader-path-separator Separator between path items
.cascader-arrow Dropdown arrow icon
.cascader-clear Clear selection button
.cascader-dropdown Dropdown container (use with popover attribute)
.cascader-search Search input container
.cascader-search-input Search input field
.cascader-panels Horizontal panels container
.cascader-panel Individual level panel
.cascader-panel-header Panel header/title
.cascader-options Options list in panel
.cascader-option Individual option
.cascader-option-label Option label text
.cascader-option-arrow Arrow indicating children
.cascader-option-active Currently highlighted option
.cascader-option-selected Selected option
.cascader-option-disabled Disabled option
.cascader-empty Empty state message
.cascader-outlined Outlined variant
.cascader-filled Filled variant
.cascader-sm Small size
.cascader-lg Large size
.cascader-error Error state
.cascader-disabled Disabled state
.cascader-loading Loading state
.cascader-spinner Loading spinner

HTML Structure with Popover API

<div class="cascader">
  <button class="cascader-trigger" popovertarget="dropdown-id">
    <span class="cascader-placeholder">Select option</span>
    <svg class="cascader-arrow">...</svg>
  </button>
  <div class="cascader-dropdown" id="dropdown-id" popover="auto">
    <div class="cascader-panels">
      <div class="cascader-panel">
        <div class="cascader-options">
          <button class="cascader-option">
            <span class="cascader-option-label">Option 1</span>
            <svg class="cascader-option-arrow">...</svg>
          </button>
        </div>
      </div>
      <div class="cascader-panel">
        <div class="cascader-options">
          <button class="cascader-option">
            <span class="cascader-option-label">Sub-option</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Color Variants

Color Variants

Ghost Variant

Ghost Cascader