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

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

ClassDescription
.cascaderBase container (required)
.cascader-triggerTrigger button (use with popovertarget)
.cascader-valueSelected value display
.cascader-placeholderPlaceholder text when empty
.cascader-pathPath breadcrumb display
.cascader-path-separatorSeparator between path items
.cascader-arrowDropdown arrow icon
.cascader-clearClear selection button
.cascader-dropdownDropdown container (use with popover attribute)
.cascader-searchSearch input container
.cascader-search-inputSearch input field
.cascader-panelsHorizontal panels container
.cascader-panelIndividual level panel
.cascader-panel-headerPanel header/title
.cascader-optionsOptions list in panel
.cascader-optionIndividual option
.cascader-option-labelOption label text
.cascader-option-arrowArrow indicating children
.cascader-option-activeCurrently highlighted option
.cascader-option-selectedSelected option
.cascader-option-disabledDisabled option
.cascader-emptyEmpty state message
.cascader-outlinedOutlined variant
.cascader-filledFilled variant
.cascader-smSmall size
.cascader-lgLarge size
.cascader-errorError state
.cascader-disabledDisabled state
.cascader-loadingLoading state
.cascader-spinnerLoading 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>