# Ajax filter offcanvas A slide-in panel container for placing filter elements, ideal for mobile-responsive filter layouts. **Overview** The Woohoo Offcanvas element creates a slide-in panel that can contain filter elements, search boxes, or any content. It supports multiple positions, animations, and responsive breakpoints for optimal mobile experience. **Content Settings** | Setting | Description | | --------------------------- | -------------------------------------------------------------- | | **Offcanvas ID** | Unique identifier to connect with trigger elements | | **Display Mode** | `Offcanvas` (always hidden) or `Responsive` (breakpoint-based) | | **Show in Builder** | Toggle visibility during page building | | **Mobile Breakpoint (px)** | Screen width below which offcanvas activates (responsive mode) | | **Position** | `Left`, `Right`, `Top`, or `Bottom` | | **Show Backdrop** | Display semi-transparent overlay behind panel | | **Close on Backdrop Click** | Close panel when clicking backdrop | | **Close on Escape Key** | Close panel with Escape key | | **Animation** | `Slide`, `Fade`, or `None` | | **Animation Duration (ms)** | Animation speed (default: 300ms) | **Design Settings** **Panel:** * Width (for left/right positions) * Max width * Height (for top/bottom positions) * Max height * Background * Padding * Borders **Backdrop:** * Overlay color (default: rgba(0,0,0,0.5)) **Layout:** * Margin **Accessibility** * `role="dialog"` for screen readers * `aria-modal="true"` indicates modal behavior * `aria-labelledby` for accessible labeling * `aria-hidden` state management **Implementation** ``` 1. Add Woohoo Offcanvas element 2. Set unique Offcanvas ID (e.g., "filter-panel") 3. Choose position and display mode 4. Add filter elements inside the offcanvas 5. Use Woohoo Offcanvas Trigger to open/close ``` *** #### Woohoo Offcanvas Trigger A button/container element that opens, closes, or toggles an Offcanvas panel. **Overview** The Woohoo Offcanvas Trigger connects to an Offcanvas panel by ID and controls its visibility. It's a container element, so you can place any content inside (text, icons, buttons). **Content Settings** | Setting | Description | | ----------------------- | ------------------------------------------------------------------- | | **Target Offcanvas ID** | ID of the Offcanvas element to control | | **Action** | `Toggle` (switch state), `Open` (show only), or `Close` (hide only) | **Design Settings** * Margin **Default Children** By default, includes a Text element with "Filters" label. Replace with your own content as needed. **Implementation** ``` 1. Add Woohoo Offcanvas Trigger element 2. Set Target Offcanvas ID to match your Offcanvas element 3. Choose action (toggle is most common) 4. Add content inside (icon, text, button, etc.) ``` *** #### Woohoo Offcanvas Close A close button placed inside an Offcanvas panel to dismiss it. **Overview** The Woohoo Offcanvas Close element provides a dedicated close button within an Offcanvas panel. It automatically closes the parent Offcanvas when clicked. **Content Settings** None - automatically detects parent Offcanvas. **Design Settings** * Margin **Default Children** Includes an X icon by default. Customize or replace as needed. **Implementation** ``` 1. Add Woohoo Offcanvas Close inside your Offcanvas element 2. Position it where users expect a close button (typically top-right) 3. Customize the icon or content as desired ``` *** #### Woohoo Filter Portal Teleports filter elements into an Offcanvas panel on mobile while keeping them in place on desktop. **Overview** The Woohoo Filter Portal enables responsive filter layouts where filters appear inline on desktop but move into an Offcanvas panel on mobile. Wrap your filter elements in a Portal, and they'll be teleported to the target Offcanvas when the breakpoint is reached. **Content Settings** | Setting | Description | | ----------------------- | -------------------------------------------- | | **Target Offcanvas ID** | ID of the Offcanvas to teleport content into | | **Order in Offcanvas** | Numeric order for multiple portals (0-100) | **Design Settings** None - portal is a structural element. **How It Works** 1. On desktop (above breakpoint): Content renders in place 2. On mobile (below breakpoint): Content teleports into target Offcanvas 3. Order setting controls arrangement when multiple portals target same Offcanvas **Implementation** ``` 1. Create an Offcanvas with responsive display mode 2. Wrap filter elements in Woohoo Filter Portal 3. Set Target Offcanvas ID to match 4. Set Order if using multiple portals ``` **Example Use Case** ``` Desktop Layout: [Sidebar with filters] [Main content with results] Mobile Layout: [Filter button] → Opens Offcanvas with all filters [Main content with results] ``` {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.woohoo.dance/ajax-filters/elements/ajax-filter-offcanvas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.