Navigation
Collapsible
A single disclosure region for optional or advanced content.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add collapsibleWrites components/ui/collapsible.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";API reference
Props and composition points for Collapsible. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | None | Controlled or uncontrolled visibility. |
CollapsibleTrigger asChild | boolean | false | Renders the trigger styles onto a child button or link. The child keeps its native semantics. |
CollapsibleContent forceMount | boolean | false | Keeps closed content in the DOM for search or measurement. Hide it visually and from assistive technology. |
className | string | None | Layout adjustments only. The content is overflow-hidden so animated height cannot escape. |
Dependencies: radix-ui, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- Radix sets aria-expanded and aria-controls on the trigger and removes collapsed content from the accessibility tree.
- The trigger is a real button. If you use asChild, keep the child focusable and do not nest another interactive control inside it.
- Do not animate height with a fixed pixel value; let the content size itself or use the Radix content-height variable.
- A collapsible is not navigation. Use Accordion when several related sections form one set, and Tabs when the content is a view switch.
Used in production
The Aback products whose interfaces shaped this component.
This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.