Variable FloatPanel`Const`

FloatPanel: NamedExoticComponent<
Omit<FloatPanelProps, "ref"> & RefAttributes<any>,
> = ...

A floating, anchored surface for transient content such as menus, dropdowns, popovers and context menus.

FloatPanel pairs a FloatPopper (which positions content next to an anchor element or point, renders it in a portal, flips it to stay on screen and animates it in) with a styled, scrollable "card" surface. The content of that card is supplied by FloatPanelProps.createPopupPanel.

Remarks

Most consumers do not render FloatPanel directly — useFloatStack manages instances for you, adding open/close timing, nested stacking, focus handling and click-away dismissal. Reach for FloatPanel directly only when you need a single, self-managed floating surface.

When to use which:

FloatPopper — you only need raw positioning + portal (no card chrome).
FloatPanel / useFloatStack — interactive floating content (menus, popovers).

The surface is theme-aware via CSS variables (e.g. --sxl-color-base-100), so it adopts the surrounding theme without a UI-framework dependency.

Example

<FloatPanel
  open={open}
  anchorEl={anchorRef.current}
  createPopupPanel={() => <MyMenu />}
/>

Variable FloatPanelConst

Remarks

Example

Settings

Variable FloatPanel`Const`