Filter Menu

A searchable menu for finding and running actions in a dropdown.

'use client';
import * as React from 'react';
import { FilterMenu } from '@base-ui/react/filter-menu';
import styles from './index.module.css';

const sharingOptions = [
  'Email',
  'Messages',
  'AirDrop',
  'Copy link',
  'Invite collaborators',
  'Publish to web',
  'Send a copy',
];
const folderOptions = [
  'Desktop',
  'Documents',
  'Downloads',
  'Projects',
  'Archive',
  'Shared',
  'Trash',
];
const exportOptions = [
  'PDF document',
  'Word document',
  'Plain text',
  'Rich text',
  'Markdown',
  'HTML page',
  'Image',
];

export default function FilterMenuDemo() {
  const [sortBy, setSortBy] = React.useState('date');
  const [showDetails, setShowDetails] = React.useState(true);
  const [showSidebar, setShowSidebar] = React.useState(false);
  const [keepOffline, setKeepOffline] = React.useState(false);

  return (
    <FilterMenu.Root>
      <FilterMenu.Trigger className={styles.Trigger}>
        Actions <CaretDownIcon />
      </FilterMenu.Trigger>
      <FilterMenu.Portal>
        <FilterMenu.Positioner className={styles.Positioner} sideOffset={8} align="start">
          <FilterMenu.Popup className={styles.Popup}>
            <div className={styles.InputContainer}>
              <FilterMenu.Input
                className={styles.Input}
                aria-label="Filter actions"
                placeholder="e.g. Save"
              />
              <FilterMenu.Clear className={styles.Clear} aria-label="Clear filter">
                <ClearIcon />
              </FilterMenu.Clear>
            </div>
            <FilterMenu.Empty className={styles.Empty}>No actions found.</FilterMenu.Empty>
            <FilterMenu.List className={styles.List}>
              <FilterMenu.Group className={styles.Section}>
                <FilterMenu.GroupLabel className={styles.GroupLabel}>File</FilterMenu.GroupLabel>
                <FilterMenu.Item className={styles.Item}>New file</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item}>Open file</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item}>Save</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item}>Save as</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item}>Duplicate</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item}>Rename</FilterMenu.Item>
              </FilterMenu.Group>
              <FilterMenu.Group className={styles.Section}>
                <FilterMenu.GroupLabel className={styles.GroupLabel}>
                  Organize
                </FilterMenu.GroupLabel>
                <FilterableSubmenu
                  label="Move to folder"
                  inputLabel="Filter folders"
                  placeholder="e.g. Projects"
                  emptyText="No folders found."
                  options={folderOptions}
                />
                <FilterableSubmenu
                  label="Share"
                  inputLabel="Filter sharing options"
                  placeholder="e.g. Email"
                  emptyText="No sharing options found."
                  options={sharingOptions}
                />
                <FilterableSubmenu
                  label="Export"
                  inputLabel="Filter export formats"
                  placeholder="e.g. PDF"
                  emptyText="No export formats found."
                  options={exportOptions}
                />
                <FilterMenu.Item className={styles.Item}>Download a copy</FilterMenu.Item>
                <FilterMenu.Item className={styles.Item} keywords={['remove', 'trash']}>
                  Delete
                </FilterMenu.Item>
              </FilterMenu.Group>

              <FilterMenu.RadioGroup
                className={styles.Section}
                value={sortBy}
                onValueChange={setSortBy}
              >
                <FilterMenu.Separator className={styles.Separator} />
                <FilterMenu.GroupLabel className={styles.GroupLabel}>Sort by</FilterMenu.GroupLabel>
                {[
                  ['date', 'Date modified'],
                  ['name', 'Name'],
                  ['size', 'Size'],
                ].map(([value, label]) => (
                  <FilterMenu.RadioItem key={value} className={styles.ChoiceItem} value={value}>
                    <FilterMenu.RadioItemIndicator className={styles.ChoiceIndicator}>
                      <CheckIcon />
                    </FilterMenu.RadioItemIndicator>
                    <span className={styles.ChoiceText}>{label}</span>
                  </FilterMenu.RadioItem>
                ))}
              </FilterMenu.RadioGroup>

              <FilterMenu.Group className={styles.Section}>
                <FilterMenu.Separator className={styles.Separator} />
                <FilterMenu.GroupLabel className={styles.GroupLabel}>View</FilterMenu.GroupLabel>
                <FilterMenu.CheckboxItem
                  className={styles.ChoiceItem}
                  checked={showDetails}
                  onCheckedChange={setShowDetails}
                >
                  <FilterMenu.CheckboxItemIndicator className={styles.ChoiceIndicator}>
                    <CheckIcon />
                  </FilterMenu.CheckboxItemIndicator>
                  <span className={styles.ChoiceText}>Show details</span>
                </FilterMenu.CheckboxItem>
                <FilterMenu.CheckboxItem
                  className={styles.ChoiceItem}
                  checked={showSidebar}
                  onCheckedChange={setShowSidebar}
                >
                  <FilterMenu.CheckboxItemIndicator className={styles.ChoiceIndicator}>
                    <CheckIcon />
                  </FilterMenu.CheckboxItemIndicator>
                  <span className={styles.ChoiceText}>Show sidebar</span>
                </FilterMenu.CheckboxItem>
                <FilterMenu.CheckboxItem
                  className={styles.ChoiceItem}
                  checked={keepOffline}
                  onCheckedChange={setKeepOffline}
                >
                  <FilterMenu.CheckboxItemIndicator className={styles.ChoiceIndicator}>
                    <CheckIcon />
                  </FilterMenu.CheckboxItemIndicator>
                  <span className={styles.ChoiceText}>Keep available offline</span>
                </FilterMenu.CheckboxItem>
              </FilterMenu.Group>
            </FilterMenu.List>
          </FilterMenu.Popup>
        </FilterMenu.Positioner>
      </FilterMenu.Portal>
    </FilterMenu.Root>
  );
}

interface FilterableSubmenuProps {
  label: string;
  inputLabel: string;
  placeholder: string;
  emptyText: string;
  options: readonly string[];
}

function FilterableSubmenu(props: FilterableSubmenuProps) {
  return (
    <FilterMenu.SubmenuRoot>
      <FilterMenu.SubmenuTrigger className={styles.SubmenuTrigger}>
        {props.label}
        <CaretRightIcon />
      </FilterMenu.SubmenuTrigger>
      <FilterMenu.Portal>
        <FilterMenu.Positioner
          className={styles.Positioner}
          sideOffset={getSubmenuOffset}
          alignOffset={getSubmenuOffset}
        >
          <FilterMenu.Popup className={styles.Popup}>
            <div className={styles.InputContainer}>
              <FilterMenu.Input
                className={styles.Input}
                aria-label={props.inputLabel}
                placeholder={props.placeholder}
              />
              <FilterMenu.Clear className={styles.Clear} aria-label="Clear filter">
                <ClearIcon />
              </FilterMenu.Clear>
            </div>
            <FilterMenu.Empty className={styles.Empty}>{props.emptyText}</FilterMenu.Empty>
            <FilterMenu.List className={`${styles.List} ${styles.SubmenuList}`}>
              {props.options.map((option) => (
                <FilterMenu.Item key={option} className={styles.Item}>
                  {option}
                </FilterMenu.Item>
              ))}
            </FilterMenu.List>
          </FilterMenu.Popup>
        </FilterMenu.Positioner>
      </FilterMenu.Portal>
    </FilterMenu.SubmenuRoot>
  );
}

function getSubmenuOffset({ side }: { side: FilterMenu.Positioner.Props['side'] }) {
  return side === 'top' || side === 'bottom' ? 4 : -4;
}

function CaretDownIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function ClearIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m3.5 3.5 9 9m0-9-9 9" />
    </svg>
  );
}

function CaretRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M6 12V4l4.5 4z" />
    </svg>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

Usage guidelines

Use for searchable actions: Choose FilterMenu when users need to find an action from a modest list. Use Menu for a short list that does not need search.
Use value-selection components for values: Choose FilterSelect for a trigger-first control with a transient filter. Choose Combobox when the input is the control or the results are large, virtualized, or loaded asynchronously.
Name the filter input: Give <FilterMenu.Input> an accessible name with aria-label, aria-labelledby, or a visible native <label>.

Anatomy

Import the component and assemble its parts:

Anatomy

import { FilterMenu } from '@base-ui/react/filter-menu';

<FilterMenu.Root>
  <FilterMenu.Trigger>Actions</FilterMenu.Trigger>
  <FilterMenu.Portal>
    <FilterMenu.Backdrop />
    <FilterMenu.Positioner>
      <FilterMenu.Popup>
        <FilterMenu.Input aria-label="Filter actions" />
        <FilterMenu.Clear aria-label="Clear filter" />
        <FilterMenu.Empty>No actions found.</FilterMenu.Empty>
        <FilterMenu.List>
          <FilterMenu.Item>Edit</FilterMenu.Item>
          <FilterMenu.Item>Duplicate</FilterMenu.Item>
        </FilterMenu.List>
      </FilterMenu.Popup>
    </FilterMenu.Positioner>
  </FilterMenu.Portal>
</FilterMenu.Root>

FilterMenu uses the same action-item patterns as Menu, including checkbox items, radio groups, links, groups, and submenus. Use the FilterMenu parts throughout the tree so the filtering behavior and keyboard navigation stay connected.

Examples

Filtering items

Items are matched against their label prop, falling back to their rendered text. Add keywords to an item when it should also match alternate names or related terms.

Pass label explicitly when text is rendered by a custom component, localized, or can change while the item is filtered out. Filtered-out items are unmounted, so their rendered text is no longer available to inspect.

Labels and keywords

<FilterMenu.List>
  <FilterMenu.Item label="Rename" keywords={['edit name']}>
    Rename
  </FilterMenu.Item>
  <FilterMenu.Item label="Move to folder" keywords={['organize']}>
    Move
  </FilterMenu.Item>
</FilterMenu.List>

Groups with no matching items are hidden, including their group labels. FilterMenu.Empty is shown when no registered items match the query.

Controlled query

Use inputValue and onInputValueChange when the query needs to be synchronized with application state. defaultInputValue sets the initial query for uncontrolled usage.

Controlling the query

import * as React from 'react';
import { FilterMenu } from '@base-ui/react/filter-menu';

function SearchableActions() {
  const [inputValue, setInputValue] = React.useState('');

  return (
    <FilterMenu.Root inputValue={inputValue} onInputValueChange={(value) => setInputValue(value)}>
      {/* menu parts */}
    </FilterMenu.Root>
  );
}

The query is cleared when the popup closes. If the query is controlled, update the value in onInputValueChange for the clear and close events as well as for typing.

Custom matching

Pass filter to replace the default case-insensitive contains matching. The callback receives the item’s filter text and the trimmed query:

Custom filter

<FilterMenu.Root filter={(itemText, query) => itemText.startsWith(query)}>
  {/* menu parts */}
</FilterMenu.Root>

When a custom filter is provided, it is authoritative and keywords are ignored.

Filterable submenus

Filtering is scoped to the nearest filter root. Use <FilterMenu.SubmenuRoot> when a submenu needs its own input; a regular <Menu.SubmenuRoot> does not become filterable automatically.

A filterable submenu

<FilterMenu.SubmenuRoot>
  <FilterMenu.SubmenuTrigger>More actions</FilterMenu.SubmenuTrigger>
  <FilterMenu.Portal>
    <FilterMenu.Positioner>
      <FilterMenu.Popup>
        <FilterMenu.Input aria-label="Filter more actions" />
        <FilterMenu.List>
          <FilterMenu.Item>Share</FilterMenu.Item>
          <FilterMenu.Item>Move</FilterMenu.Item>
        </FilterMenu.List>
      </FilterMenu.Popup>
    </FilterMenu.Positioner>
  </FilterMenu.Portal>
</FilterMenu.SubmenuRoot>

API reference

Root

defaultInputValuestring—

Name: defaultInputValue
Description: The uncontrolled filter query when the menu is initially rendered. To render a controlled query, use the inputValue prop instead.
Type: string | undefined

inputValuestring—

Name: inputValue
Description: The filter query. Use when controlled. The query is cleared when the popup closes.
Type: string | undefined

onInputValueChangefunction—

Name: onInputValueChange
Description: Event handler called when the filter query changes.
Type: | (( value: string, eventDetails: FilterMenu.Root.InputValueChangeEventDetails, ) => void) | undefined

defaultOpenbooleanfalse

Name: defaultOpen
Description: Whether the menu is initially open.

To render a controlled menu, use the open prop instead.
Type: boolean | undefined
Default: false

openboolean—

Name: open
Description: Whether the menu is currently open.
Type: boolean | undefined

onOpenChangefunction—

Name: onOpenChange
Description: Event handler called when the menu is opened or closed.
Type: | (( open: boolean, eventDetails: FilterMenu.Root.ChangeEventDetails, ) => void) | undefined

highlightItemOnHoverbooleantrue

Name: highlightItemOnHover
Description: Whether moving the pointer over items should highlight them. Disabling this prop allows CSS :hover to be differentiated from the :focus (data-highlighted) state.
Type: boolean | undefined
Default: true

actionsRefReact.RefObject<MenuRoot.Actions | null>—

Name: actionsRef
Description: A ref to imperative actions.

unmount: Manually unmounts the menu. Call this after any externally controlled closing animation finishes.

close: When specified, the menu can be closed imperatively.
Type: React.RefObject<MenuRoot.Actions | null> | undefined

closeParentOnEscbooleanfalse

Name: closeParentOnEsc
Description: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
Type: boolean | undefined
Default: false

defaultTriggerIdstring | null—

Name: defaultTriggerId
Description: ID of the trigger that the menu is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open menu.
Type: string | null | undefined

filterFilterDropdownFilter—

Name: filter
Description: Replaces the default case-insensitive substring matching for item text. Receives an item’s filter text and the trimmed query. When provided, this function is authoritative and item keywords are ignored.
Type: | (( filterText: string, query: string, filterValue?: unknown, ) => boolean) | undefined

handleFilterMenu.Handle<Payload>—

Name: handle
Description: A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu’s open state.
Type: FilterMenu.Handle<Payload> | undefined

localeIntl.LocalesArgument—

Name: locale
Description: Locale used when comparing an item against the query. Defaults to the runtime’s default locale.
Type: Intl.LocalesArgument | undefined

loopFocusbooleantrue

Name: loopFocus
Description: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Type: boolean | undefined
Default: true

Name: modal
Description: Determines if the menu enters a modal state when open.

true: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.

false: user interaction with the rest of the document is allowed.

On touch devices, a true modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

Nested menus ignore this prop, and menus opened by hover are never modal.
Type: boolean | undefined
Default: true

onOpenChangeCompletefunction—

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the menu is opened or closed.
Type: ((open: boolean) => void) | undefined

triggerIdstring | null—

Name: triggerId
Description: ID of the trigger that the menu is associated with. This is useful in conjunction with the open prop to create a controlled menu. There’s no need to specify this prop when the menu is uncontrolled (that is, when the open prop is not set).
Type: string | null | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

orientationMenuRoot.Orientation'vertical'

Name: orientation
Description: The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
Type: MenuRoot.Orientation | undefined
Default: 'vertical'

children

| React.ReactNode 
|  PayloadChildRenderFunction<Payload>

—

Name: children
Description: The content of the menu. This can be a regular React node or a render function that receives the payload of the active trigger.
Type: React.ReactNode | ((arg: { payload: unknown | undefined }) => ReactNode)<Payload> | undefined

FilterMenu.Root.PropsHide

Re-Export of Root props as FilterMenuRootProps

FilterMenu.Root.StateHide

type FilterMenuRootState = {}

FilterMenu.Root.ActionsHide

type FilterMenuRootActions = { unmount: () => void; close: () => void }

FilterMenu.Root.ChangeEventReasonHide

type FilterMenuRootChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none'

FilterMenu.Root.ChangeEventDetailsHide

type FilterMenuRootChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  preventUnmountOnClose: (() => void);
}

FilterMenu.Root.InputValueChangeEventDetailsHide

type FilterMenuRootInputValueChangeEventDetails = (
  | { reason: 'clear-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'input-clear'; event: Event | FocusEvent | InputEvent }
  | { reason: 'popup-close'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

FilterMenu.Root.InputValueChangeEventReasonHide

type FilterMenuRootInputValueChangeEventReason =
  'input-change' | 'input-clear' | 'clear-press' | 'popup-close'

Trigger

handleFilterMenu.Handle<Payload>—

Name: handle
Description: A handle to associate the trigger with a menu.
Type: FilterMenu.Handle<Payload> | undefined

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

payloadPayload—

Name: payload
Description: A payload to pass to the menu when it is opened.
Type: Payload | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

openOnHoverboolean—

Name: openOnHover
Description: Whether the menu should also open when the trigger is hovered.
Type: boolean | undefined

delaynumber100

Name: delay
Description: How long to wait before the menu may be opened on hover. Specified in milliseconds.

Requires the openOnHover prop.
Type: number | undefined
Default: 100

closeDelaynumber0

Name: closeDelay
Description: How long to wait before closing the menu that was opened on hover. Specified in milliseconds.

Requires the openOnHover prop.
Type: number | undefined
Default: 0

idstring—

Name: id
Type: string | undefined

childrenReact.ReactNode—

Name: children
Type: React.ReactNode | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuTriggerState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuTriggerState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuTriggerState, ) => ReactElement) | undefined

FilterMenu.Trigger.PropsHide

Re-Export of Trigger props as FilterMenuTriggerProps

FilterMenu.Trigger.StateHide

type FilterMenuTriggerState = {
  /** Whether the trigger is disabled. */
  disabled: boolean;
  /** Whether the popup is open. */
  open: boolean;
}

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

containerUnion—

Name: container
Description: A parent element to render the portal element into.
Type: | HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuPortalState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuPortalState, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean | undefined
Default: false

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuPortalState, ) => ReactElement) | undefined

FilterMenu.Portal.PropsHide

Re-Export of Portal props as FilterMenuPortalProps

FilterMenu.Portal.StateHide

type FilterMenuPortalState = {}

Backdrop

An overlay displayed beneath the menu popup. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuBackdropState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuBackdropState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuBackdropState, ) => ReactElement) | undefined

FilterMenu.Backdrop.PropsHide

Re-Export of Backdrop props as FilterMenuBackdropProps

FilterMenu.Backdrop.StateHide

type FilterMenuBackdropState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
}

Positioner

Positions the menu popup against the trigger. Renders a <div> element.

disableAnchorTrackingbooleanfalse

Name: disableAnchorTracking
Description: Whether to disable the popup from tracking any layout shift of its positioning anchor.
Type: boolean | undefined
Default: false

alignAlign'center'

Name: align
Description: How to align the popup relative to the specified side.
Type: 'start' | 'center' | 'end' | undefined
Default: 'center'

alignOffsetnumber | OffsetFunction0

Name: alignOffset
Description: Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.

The function takes a data object parameter with the following properties:

data.anchor: the dimensions of the anchor element with properties width and height.

data.positioner: the dimensions of the positioner element with properties width and height.

data.side: which side of the anchor element the positioner is aligned against.

data.align: how the positioner is aligned relative to the specified side.
Type: | number | ((data: { side: | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'; align: 'start' | 'center' | 'end'; anchor: { width: number; height: number }; positioner: { width: number; height: number }; }) => number) | undefined
Default: 0
Example: <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.width : anchor.height; }} />

sideSide'bottom'

Name: side
Description: Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
Type: | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | undefined
Default: 'bottom'

sideOffsetnumber | OffsetFunction0

Name: sideOffset
Description: Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.

The function takes a data object parameter with the following properties:

data.anchor: the dimensions of the anchor element with properties width and height.

data.positioner: the dimensions of the positioner element with properties width and height.

data.side: which side of the anchor element the positioner is aligned against.

data.align: how the positioner is aligned relative to the specified side.
Type: | number | ((data: { side: | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'; align: 'start' | 'center' | 'end'; anchor: { width: number; height: number }; positioner: { width: number; height: number }; }) => number) | undefined
Default: 0
Example: <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' || side === 'bottom' ? anchor.height : anchor.width; }} />

arrowPaddingnumber5

Name: arrowPadding
Description: Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
Type: number | undefined
Default: 5

anchorUnion—

Name: anchor
Description: An element to position the popup against. By default, the popup will be positioned against the trigger.
Type: | Element | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null) | null | undefined

collisionAvoidanceCollisionAvoidance—

Name: collisionAvoidance
Description: Determines how to handle collisions when positioning the popup.

side controls overflow on the preferred placement axis (top/bottom or left/right):

'flip': keep the requested side when it fits; otherwise try the opposite side (top and bottom, or left and right).

'shift': never change side; keep the requested side and move the popup within the clipping boundary so it stays visible.

'none': do not correct side-axis overflow.

align controls overflow on the alignment axis (start/center/end):

'flip': keep side, but swap start and end when the requested alignment overflows.

'shift': keep side and requested alignment, then nudge the popup along the alignment axis to fit.

'none': do not correct alignment-axis overflow.

fallbackAxisSide controls fallback behavior on the perpendicular axis when the preferred axis cannot fit:

'start': allow perpendicular fallback and try the logical start side first (top before bottom, or left before right in LTR).

'end': allow perpendicular fallback and try the logical end side first (bottom before top, or right before left in LTR).

'none': do not fallback to the perpendicular axis.

When side is 'shift', explicitly setting align only supports 'shift' or 'none'. If align is omitted, it defaults to 'flip'.
Type: CollisionAvoidance | undefined
Example: <Positioner collisionAvoidance={{ side: 'shift', align: 'shift', fallbackAxisSide: 'none', }} />

collisionBoundaryBoundary'clipping-ancestors'

Name: collisionBoundary
Description: An element or a rectangle that delimits the area that the popup is confined to.
Type: Boundary | undefined
Default: 'clipping-ancestors'

collisionPaddingPadding5

Name: collisionPadding
Description: Additional space to maintain from the edge of the collision boundary.
Type: Padding | undefined
Default: 5

stickybooleanfalse

Name: sticky
Description: Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
Type: boolean | undefined
Default: false

positionMethod'absolute' | 'fixed''absolute'

Name: positionMethod
Description: Determines which CSS position property to use.
Type: 'absolute' | 'fixed' | undefined
Default: 'absolute'

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuPositionerState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuPositionerState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuPositionerState, ) => ReactElement) | undefined

FilterMenu.Positioner.PropsHide

Re-Export of Positioner props as FilterMenuPositionerProps

FilterMenu.Positioner.StateHide

type FilterMenuPositionerState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /** The alignment of the component relative to the anchor. */
  align: 'start' | 'center' | 'end';
  /** Whether the anchor element is hidden. */
  anchorHidden: boolean;
  /** Whether the component is nested. */
  nested: boolean;
  /** Whether CSS transitions should be disabled. */
  instant: string | undefined;
}

finalFocusUnion—

Name: finalFocus
Description: Determines the element to focus when the menu is closed.

false: Do not move focus.

true: Move focus based on the default behavior (trigger or previously focused element).

RefObject: Move focus to the ref element.

function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.
Type: | boolean | React.RefObject<HTMLElement | null> | (( closeType: 'mouse' | 'touch' | 'pen' | 'keyboard' | '', ) => boolean | void | HTMLElement | null) | undefined

childrenReact.ReactNode—

Name: children
Type: React.ReactNode | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuPopupState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuPopupState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuPopupState, ) => ReactElement) | undefined

FilterMenu.Popup.StateHide

type FilterMenuPopupState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** The side of the anchor the component is placed on. */
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /** The alignment of the component relative to the anchor. */
  align: 'start' | 'center' | 'end';
  /** Whether the menu is currently open. */
  open: boolean;
  /** Whether the component is nested. */
  nested: boolean;
  /** Whether transitions should be skipped. */
  instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
}

Input

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: FilterMenu.Input.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.Input.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.Input.State, ) => ReactElement) | undefined

FilterMenu.Input.PropsHide

Re-Export of Input props as FilterMenuInputProps

FilterMenu.Input.StateHide

type FilterMenuInputState = {}

Clear

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: FilterMenu.Clear.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.Clear.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.Clear.State, ) => ReactElement) | undefined

FilterMenu.Clear.PropsHide

Re-Export of Clear props as FilterMenuClearProps

FilterMenu.Clear.StateHide

type FilterMenuClearState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the clear button is visible. */
  visible: boolean;
}

Empty

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: FilterMenu.Empty.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.Empty.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.Empty.State, ) => ReactElement) | undefined

FilterMenu.Empty.PropsHide

Re-Export of Empty props as FilterMenuEmptyProps

FilterMenu.Empty.StateHide

type FilterMenuEmptyState = {}

List

idstring—

Name: id
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: FilterMenu.List.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.List.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.List.State, ) => ReactElement) | undefined

FilterMenu.List.PropsHide

Re-Export of List props as FilterMenuListProps

FilterMenu.List.StateHide

type FilterMenuListState = {}

Viewport

A viewport for displaying content transitions. This component is only required if one popup can be opened by multiple triggers, its content changes based on the trigger, and switching between them is animated. Renders a <div> element.

childrenReact.ReactNode—

Name: children
Description: The content to render inside the transition container.
Type: React.ReactNode | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuViewportState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuViewportState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuViewportState, ) => ReactElement) | undefined

FilterMenu.Viewport.PropsHide

Re-Export of Viewport props as FilterMenuViewportProps

FilterMenu.Viewport.StateHide

type FilterMenuViewportState = {
  /** The activation direction of the transitioned content. */
  activationDirection: string | undefined;
  /** Whether the viewport is currently transitioning between contents. */
  transitioning: boolean;
  /** Present if animations should be instant. */
  instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
}

Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuArrowState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuArrowState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuArrowState, ) => ReactElement) | undefined

FilterMenu.Arrow.PropsHide

Re-Export of Arrow props as FilterMenuArrowProps

FilterMenu.Arrow.StateHide

type FilterMenuArrowState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
  /** The alignment of the component relative to the anchor. */
  align: 'start' | 'center' | 'end';
  /** Whether the arrow cannot be centered on the anchor. */
  uncentered: boolean;
}

Item

labelstring—

Name: label
Description: Overrides the text label to use when the item is matched during keyboard text navigation.
Type: string | undefined

onClickfunction—

Name: onClick
Description: The click handler for the menu item.
Type: | (( event: BaseUIEvent< React.MouseEvent<HTMLDivElement, MouseEvent> >, ) => void) | undefined

closeOnClickbooleantrue

Name: closeOnClick
Description: Whether to close the menu when the item is clicked.
Type: boolean | undefined
Default: true

keywordsstring[]—

Name: keywords
Type: string[] | undefined

nativeButtonbooleanfalse

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.
Type: boolean | undefined
Default: false

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuItemState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuItemState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuItemState, ) => ReactElement) | undefined

FilterMenu.Item.PropsHide

Re-Export of Item props as FilterMenuItemProps

FilterMenu.Item.StateHide

type FilterMenuItemState = {
  /** Whether the item should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
}

LinkItem

labelstring—

Name: label
Description: Overrides the text label to use when the item is matched during keyboard text navigation.
Type: string | undefined

closeOnClickbooleanfalse

Name: closeOnClick
Description: Whether to close the menu when the item is clicked.
Type: boolean | undefined
Default: false

keywordsstring[]—

Name: keywords
Type: string[] | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuLinkItemState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuLinkItemState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: React.DetailedHTMLProps< React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement >, state: MenuLinkItemState, ) => ReactElement) | undefined

FilterMenu.LinkItem.PropsHide

Re-Export of LinkItem props as FilterMenuLinkItemProps

FilterMenu.LinkItem.StateHide

type FilterMenuLinkItemState = {
  /** Whether the item is highlighted. */
  highlighted: boolean;
}

SubmenuRoot

defaultInputValuestring—

Name: defaultInputValue
Description: The uncontrolled filter query when the submenu is initially rendered. To render a controlled query, use the inputValue prop instead.
Type: string | undefined

inputValuestring—

Name: inputValue
Description: The filter query. Use when controlled. The query is cleared when the popup closes.
Type: string | undefined

onInputValueChangefunction—

Name: onInputValueChange
Description: Event handler called when the filter query changes.
Type: | (( value: string, eventDetails: FilterMenu.SubmenuRoot.InputValueChangeEventDetails, ) => void) | undefined

defaultOpenbooleanfalse

Name: defaultOpen
Description: Whether the submenu is initially open.

To render a controlled submenu, use the open prop instead.
Type: boolean | undefined
Default: false

openboolean—

Name: open
Description: Whether the submenu is currently open.
Type: boolean | undefined

onOpenChangefunction—

Name: onOpenChange
Description: Event handler called when the submenu is opened or closed.
Type: | (( open: boolean, eventDetails: FilterMenu.SubmenuRoot.ChangeEventDetails, ) => void) | undefined

highlightItemOnHoverbooleantrue

Name: highlightItemOnHover
Description: Whether moving the pointer over items should highlight them. Disabling this prop allows CSS :hover to be differentiated from the :focus (data-highlighted) state.
Type: boolean | undefined
Default: true

actionsRefReact.RefObject<MenuRoot.Actions | null>—

Name: actionsRef
Description: A ref to imperative actions.

unmount: Manually unmounts the menu. Call this after any externally controlled closing animation finishes.

close: When specified, the menu can be closed imperatively.
Type: React.RefObject<MenuRoot.Actions | null> | undefined

closeParentOnEscbooleanfalse

Name: closeParentOnEsc
Description: When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
Type: boolean | undefined
Default: false

filterFilterDropdownFilter—

Name: filter
Description: Replaces the default case-insensitive substring matching for item text. Receives an item’s filter text and the trimmed query. When provided, this function is authoritative and item keywords are ignored.
Type: | (( filterText: string, query: string, filterValue?: unknown, ) => boolean) | undefined

localeIntl.LocalesArgument—

Name: locale
Description: Locale used when comparing an item against the query. Defaults to the runtime’s default locale.
Type: Intl.LocalesArgument | undefined

loopFocusbooleantrue

Name: loopFocus
Description: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Type: boolean | undefined
Default: true

onOpenChangeCompletefunction—

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the menu is opened or closed.
Type: ((open: boolean) => void) | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

orientationMenuRoot.Orientation'vertical'

Name: orientation
Description: The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
Type: MenuRoot.Orientation | undefined
Default: 'vertical'

childrenReact.ReactNode—

Name: children
Description: The content of the submenu.
Type: React.ReactNode | undefined

FilterMenu.SubmenuRoot.PropsHide

Re-Export of SubmenuRoot props as FilterMenuSubmenuRootProps

FilterMenu.SubmenuRoot.StateHide

type FilterMenuSubmenuRootState = {}

FilterMenu.SubmenuRoot.ChangeEventReasonHide

type FilterMenuSubmenuRootChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none'

FilterMenu.SubmenuRoot.ChangeEventDetailsHide

type FilterMenuSubmenuRootChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  preventUnmountOnClose: (() => void);
}

FilterMenu.SubmenuRoot.InputValueChangeEventDetailsHide

type FilterMenuSubmenuRootInputValueChangeEventDetails = (
  | { reason: 'clear-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'input-clear'; event: Event | FocusEvent | InputEvent }
  | { reason: 'popup-close'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

FilterMenu.SubmenuRoot.InputValueChangeEventReasonHide

type FilterMenuSubmenuRootInputValueChangeEventReason =
  'input-change' | 'input-clear' | 'clear-press' | 'popup-close'

SubmenuTrigger

labelstring—

Name: label
Description: Overrides the text label to use when the item is matched during keyboard text navigation.
Type: string | undefined

onClickfunction—

Name: onClick
Type: | (( event: BaseUIEvent< React.MouseEvent<HTMLDivElement, MouseEvent> >, ) => void) | undefined

keywordsstring[]—

Name: keywords
Type: string[] | undefined

nativeButtonbooleanfalse

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.
Type: boolean | undefined
Default: false

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

openOnHoverboolean—

Name: openOnHover
Description: Whether the menu should also open when the trigger is hovered.
Type: boolean | undefined

delaynumber100

Name: delay
Description: How long to wait before the menu may be opened on hover. Specified in milliseconds.

Requires the openOnHover prop.
Type: number | undefined
Default: 100

closeDelaynumber0

Name: closeDelay
Description: How long to wait before closing the menu that was opened on hover. Specified in milliseconds.

Requires the openOnHover prop.
Type: number | undefined
Default: 0

idstring—

Name: id
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: FilterMenu.SubmenuTrigger.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.SubmenuTrigger.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.SubmenuTrigger.State, ) => ReactElement) | undefined

FilterMenu.SubmenuTrigger.PropsHide

Re-Export of SubmenuTrigger props as FilterMenuSubmenuTriggerProps

FilterMenu.SubmenuTrigger.StateHide

type FilterMenuSubmenuTriggerState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** Whether the menu is currently open. */
  open: boolean;
}

Group

childrenReact.ReactNode—

Name: children
Description: The content of the component.
Type: React.ReactNode | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuGroupState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuGroupState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuGroupState, ) => ReactElement) | undefined

FilterMenu.Group.PropsHide

Re-Export of Group props as FilterMenuGroupProps

FilterMenu.Group.StateHide

type FilterMenuGroupState = {}

GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: FilterMenu.GroupLabel.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: FilterMenu.GroupLabel.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: FilterMenu.GroupLabel.State, ) => ReactElement) | undefined

FilterMenu.GroupLabel.PropsHide

Re-Export of GroupLabel props as FilterMenuGroupLabelProps

FilterMenu.GroupLabel.StateHide

type FilterMenuGroupLabelState = {}

RadioGroup

defaultValueany—

Name: defaultValue
Description: The uncontrolled value of the radio item that should be initially selected.

To render a controlled radio group, use the value prop instead.
Type: any | undefined

valueany—

Name: value
Description: The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the defaultValue prop instead.
Type: any | undefined

onValueChangefunction—

Name: onValueChange
Description: Function called when the selected value changes.
Type: | (( value: any, eventDetails: MenuRadioGroup.ChangeEventDetails, ) => void) | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

childrenReact.ReactNode—

Name: children
Description: The content of the component.
Type: React.ReactNode | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuRadioGroupState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuRadioGroupState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuRadioGroupState, ) => ReactElement) | undefined

FilterMenu.RadioGroup.PropsHide

Re-Export of RadioGroup props as FilterMenuRadioGroupProps

FilterMenu.RadioGroup.StateHide

type FilterMenuRadioGroupState = {
  /** Whether the component is disabled. */
  disabled: boolean;
}

FilterMenu.RadioGroup.ChangeEventReasonHide

type FilterMenuRadioGroupChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none'

FilterMenu.RadioGroup.ChangeEventDetailsHide

type FilterMenuRadioGroupChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  preventUnmountOnClose: (() => void);
}

RadioItem

labelstring—

Name: label
Description: Overrides the text label to use when the item is matched during keyboard text navigation.
Type: string | undefined

value^*any—

Name: value
Description: Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected.
Type: any

onClickfunction—

Name: onClick
Description: The click handler for the menu item.
Type: | (( event: BaseUIEvent< React.MouseEvent<HTMLDivElement, MouseEvent> >, ) => void) | undefined

closeOnClickbooleanfalse

Name: closeOnClick
Description: Whether to close the menu when the item is clicked.
Type: boolean | undefined
Default: false

keywordsstring[]—

Name: keywords
Type: string[] | undefined

nativeButtonbooleanfalse

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.
Type: boolean | undefined
Default: false

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuRadioItemState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuRadioItemState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuRadioItemState, ) => ReactElement) | undefined

FilterMenu.RadioItem.PropsHide

Re-Export of RadioItem props as FilterMenuRadioItemProps

FilterMenu.RadioItem.StateHide

type FilterMenuRadioItemState = {
  /** Whether the radio item should ignore user interaction. */
  disabled: boolean;
  /** Whether the radio item is currently highlighted. */
  highlighted: boolean;
  /** Whether the radio item is currently selected. */
  checked: boolean;
}

RadioItemIndicator

Indicates whether the radio item is selected. Renders a <span> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: MenuRadioItemIndicatorState, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuRadioItemIndicatorState, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the HTML element in the DOM when the radio item is inactive.
Type: boolean | undefined
Default: false

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuRadioItemIndicatorState, ) => ReactElement) | undefined

FilterMenu.RadioItemIndicator.PropsHide

Re-Export of RadioItemIndicator props as FilterMenuRadioItemIndicatorProps

FilterMenu.RadioItemIndicator.StateHide

type FilterMenuRadioItemIndicatorState = {
  /** Whether the radio item is currently selected. */
  checked: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
}

CheckboxItem

labelstring—

Name: label
Description: Overrides the text label to use when the item is matched during keyboard text navigation.
Type: string | undefined

defaultCheckedbooleanfalse

Name: defaultChecked
Description: Whether the checkbox item is initially ticked.

To render a controlled checkbox item, use the checked prop instead.
Type: boolean | undefined
Default: false

checkedboolean—

Name: checked
Description: Whether the checkbox item is currently ticked.

To render an uncontrolled checkbox item, use the defaultChecked prop instead.
Type: boolean | undefined

onCheckedChangefunction—

Name: onCheckedChange
Description: Event handler called when the checkbox item is ticked or unticked.
Type: | (( checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails, ) => void) | undefined

onClickfunction—

Name: onClick
Description: The click handler for the menu item.
Type: | (( event: BaseUIEvent< React.MouseEvent<HTMLDivElement, MouseEvent> >, ) => void) | undefined

closeOnClickbooleanfalse

Name: closeOnClick
Description: Whether to close the menu when the item is clicked.
Type: boolean | undefined
Default: false

keywordsstring[]—

Name: keywords
Type: string[] | undefined

nativeButtonbooleanfalse

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.
Type: boolean | undefined
Default: false

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: MenuCheckboxItemState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuCheckboxItemState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuCheckboxItemState, ) => ReactElement) | undefined

FilterMenu.CheckboxItem.PropsHide

Re-Export of CheckboxItem props as FilterMenuCheckboxItemProps

FilterMenu.CheckboxItem.StateHide

type FilterMenuCheckboxItemState = {
  /** Whether the checkbox item should ignore user interaction. */
  disabled: boolean;
  /** Whether the checkbox item is currently highlighted. */
  highlighted: boolean;
  /** Whether the checkbox item is currently ticked. */
  checked: boolean;
}

FilterMenu.CheckboxItem.ChangeEventReasonHide

type FilterMenuCheckboxItemChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none'

FilterMenu.CheckboxItem.ChangeEventDetailsHide

type FilterMenuCheckboxItemChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  preventUnmountOnClose: (() => void);
}

CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: MenuCheckboxItemIndicatorState, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: MenuCheckboxItemIndicatorState, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the HTML element in the DOM when the checkbox item is not checked.
Type: boolean | undefined
Default: false

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: MenuCheckboxItemIndicatorState, ) => ReactElement) | undefined

FilterMenu.CheckboxItemIndicator.PropsHide

Re-Export of CheckboxItemIndicator props as FilterMenuCheckboxItemIndicatorProps

FilterMenu.CheckboxItemIndicator.StateHide

type FilterMenuCheckboxItemIndicatorState = {
  /** Whether the checkbox item is currently ticked. */
  checked: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
}

Separator

A separator element accessible to screen readers. Renders a <div> element.

orientationOrientation'horizontal'

Name: orientation
Description: The orientation of the separator.
Type: 'horizontal' | 'vertical' | undefined
Default: 'horizontal'

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: SeparatorState) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: SeparatorState, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: SeparatorState, ) => ReactElement) | undefined

FilterMenu.Separator.PropsHide

Re-Export of Separator props as FilterMenuSeparatorProps

FilterMenu.Separator.StateHide

type FilterMenuSeparatorState = {
  /** The orientation of the separator. */
  orientation: 'horizontal' | 'vertical';
}

createHandle

Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.

Return value

FilterMenu.Handle<Payload>

Handle

Controls a Menu imperatively and associates detached Menu.Trigger components with a Menu.Root. Create one with Menu.createHandle() and pass it to the handle prop of the root and of any triggers rendered outside of it.

The imperative methods take effect only while a root using this handle is mounted; calls made before a root attaches (or after it unmounts) are ignored.

Properties

isOpenbooleanreadonly

Name: isOpen
Description: Whether the menu is currently open. Returns false while no root is attached to the handle.
Type: boolean
Modifiers: readonly

Methods

open(triggerId)void

Name: open
Description: Opens the menu and associates it with the trigger with the given id.

This method should only be called in an event handler or an effect (not during rendering).
Parameters: triggerId—
string
ID of the trigger to associate with the menu. The trigger must be a matching Menu.Trigger with this handle passed as a prop.
Returns: void

close()void

Name: close
Description: Closes the menu.

This method should only be called in an event handler or an effect (not during rendering).
Returns: void

FilterMenu.Root.PropsHide

FilterMenu.Root.StateHide

FilterMenu.Root.ActionsHide

FilterMenu.Root.ChangeEventReasonHide

FilterMenu.Root.ChangeEventDetailsHide

FilterMenu.Root.InputValueChangeEventDetailsHide

FilterMenu.Root.InputValueChangeEventReasonHide

FilterMenu.Trigger.PropsHide

FilterMenu.Trigger.StateHide

FilterMenu.Portal.PropsHide

FilterMenu.Portal.StateHide

FilterMenu.Backdrop.PropsHide

FilterMenu.Backdrop.StateHide

FilterMenu.Positioner.PropsHide

FilterMenu.Positioner.StateHide

FilterMenu.Popup.PropsHide

FilterMenu.Popup.StateHide

FilterMenu.Input.PropsHide

FilterMenu.Input.StateHide

FilterMenu.Clear.PropsHide

FilterMenu.Clear.StateHide

FilterMenu.Empty.PropsHide

FilterMenu.Empty.StateHide

FilterMenu.List.PropsHide

FilterMenu.List.StateHide

FilterMenu.Viewport.PropsHide

FilterMenu.Viewport.StateHide

FilterMenu.Arrow.PropsHide

FilterMenu.Arrow.StateHide

FilterMenu.Item.PropsHide

FilterMenu.Item.StateHide

FilterMenu.LinkItem.PropsHide

FilterMenu.LinkItem.StateHide

FilterMenu.SubmenuRoot.PropsHide

FilterMenu.SubmenuRoot.StateHide

FilterMenu.SubmenuRoot.ChangeEventReasonHide

FilterMenu.SubmenuRoot.ChangeEventDetailsHide

FilterMenu.SubmenuRoot.InputValueChangeEventDetailsHide

FilterMenu.SubmenuRoot.InputValueChangeEventReasonHide

FilterMenu.SubmenuTrigger.PropsHide

FilterMenu.SubmenuTrigger.StateHide

FilterMenu.Group.PropsHide

FilterMenu.Group.StateHide

FilterMenu.GroupLabel.PropsHide

FilterMenu.GroupLabel.StateHide

FilterMenu.RadioGroup.PropsHide

FilterMenu.RadioGroup.StateHide

FilterMenu.RadioGroup.ChangeEventReasonHide

FilterMenu.RadioGroup.ChangeEventDetailsHide

FilterMenu.RadioItem.PropsHide

FilterMenu.RadioItem.StateHide

FilterMenu.RadioItemIndicator.PropsHide

FilterMenu.RadioItemIndicator.StateHide

FilterMenu.CheckboxItem.PropsHide

FilterMenu.CheckboxItem.StateHide

FilterMenu.CheckboxItem.ChangeEventReasonHide

FilterMenu.CheckboxItem.ChangeEventDetailsHide

FilterMenu.CheckboxItemIndicator.PropsHide

FilterMenu.CheckboxItemIndicator.StateHide

FilterMenu.Separator.PropsHide

FilterMenu.Separator.StateHide

Return value

Properties

Methods