Component catalog
Find components by purpose, with API references, examples, and accessibility guidance.
Find components by purpose, with API references, examples, and accessibility guidance.
Reveals bar controls without defining their action behavior.
import { ExpandableBarRegion } from "@liquidify/react/expandable-bar-region"| Prop | Type | Default | Description |
|---|---|---|---|
| animated | boolean | undefined | Not specified | |
| arrangement | "stack" | "row" | undefined | Not specified | |
| asChild | undefined | Not specified | Multiple owned elements cannot merge onto a single child. |
| className | string | undefined | Not specified | Additional CSS class for the glass surface. Use it to override `--lq-*` tokens in a stylesheet. |
| closeOnEscape | boolean | undefined | Not specified | |
| defaultOpen | boolean | undefined | Not specified | |
| items required | readonly { id: string; content: ReactNode | ((actions: ExpandableBarRegionActions) => ReactNode); }[] | Not specified | One registered glass surface per item. Child actions do not automatically close the region. |
| label required | string | Not specified | |
| onCloseAutoFocus | ((event: Event) => void) | undefined | Not specified | Prevent the default to choose a custom focus destination after closing. |
| onOpenChange | ((open: boolean) => void) | undefined | Not specified | |
| open | boolean | undefined | Not specified | |
| ref | Ref<HTMLDivElement> | undefined | Not specified | Ref to the rendered root or merged child. Its generic element type follows the component’s polymorphic root and defaults to `HTMLElement`. |
| side | "top" | "bottom" | undefined | Not specified | |
| trigger | ((props: AdaptiveRegionTriggerProps, actions: ExpandableBarRegionActions) => ReactNode) | undefined | Not specified |