> For the complete documentation index, see [llms.txt](https://docs.woohoo.dance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.woohoo.dance/ajax-filters/elements/ajax-filter-offcanvas.md).

# 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="<https://drive.google.com/file/d/1X1oF2uK86kLvX-w5ErAH4EyLxxRMZdam/view?usp=sharing>" %}