Component catalog
Find components by purpose, with API references, examples, and accessibility guidance.
Find components by purpose, with API references, examples, and accessibility guidance.
Adaptive layout with independently controlled bars and sidebar.
import { AdaptiveAppLayout } from "@liquidify/react/adaptive-app-layout"| Prop | Type | Default | Description |
|---|---|---|---|
| actions | LayoutSlot | Not specified | |
| appName | string | undefined | Not specified | |
| asChild | undefined | Not specified | Multiple owned elements cannot merge onto a single child. |
| bottomBar | AdaptiveAppBarOptions | null | undefined | Not specified | |
| children required | ReactNode | Not specified | |
| className | string | undefined | Not specified | Additional CSS class for the glass surface. Use it to override `--lq-*` tokens in a stylesheet. |
| compactNavigation | { label: string; icon?: ReactNode; } | undefined | Not specified | |
| contentInset | "automatic" | "none" | undefined | Not specified | Automatic content spacing, or application padding using public inset tokens. |
| contentProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Not specified | |
| defaultSidebarOpen | boolean | undefined | Not specified | |
| gap | LayoutSpacing | undefined | Not specified | |
| leading | LayoutSlot | Not specified | |
| navigation | LayoutSlot | Not specified | |
| onPresentationChange | ((change: AdaptivePresentationChange) => void) | undefined | Not specified | |
| onSidebarOpenChange | ((open: boolean, details: AdaptiveStateChange<boolean>) => void) | 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`. |
| scrollBehavior | AdaptiveScrollBehavior | undefined | Not specified | |
| separation | LayoutSpacing | undefined | Not specified | |
| showCompactNavigation | boolean | undefined | Not specified | |
| showSidebar | boolean | undefined | Not specified | Defaults to whether navigation or sidebar content is present. |
| sidebar | LayoutSlot | Not specified | |
| sidebarContentProps | DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined | Not specified | |
| sidebarFooter | LayoutSlot | Not specified | |
| sidebarOpen | boolean | undefined | Not specified | |
| sidebarProps | DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined | Not specified | |
| sidebarTitle | string | undefined | Not specified | |
| sidebarToggle | LayoutSlot | Not specified | `undefined` uses the standard toggle; `null` omits it. |
| sidebarToggleLabels | { readonly show: string; readonly hide: string; } | undefined | Not specified | Accessible labels for the default sidebar toggle. |
| skipLinkLabel | string | undefined | Not specified | |
| title | string | undefined | Not specified | |
| topBar | AdaptiveAppBarOptions | null | undefined | Not specified | `null` omits the bar; `undefined` uses default content. |
| visualDebug | boolean | undefined | Not specified |