---
title: Offcanvas
description: "The Offcanvas Block lets you display a toggle button that opens a hidden panel containing a selected ShapeBlock Template. Choose between a classic side panel and a modern fullscreen-style panel, customize the opening position and width, and style the menu…"
url: "https://shapekode.com/product/shapeblock/docs/offcanvas/"
updated: "2026-10-17"
category: "Header & Footer Block"
---

# Offcanvas

The Offcanvas Block lets you display a toggle button that opens a hidden panel containing a selected ShapeBlock Template. Choose between a classic side panel and a modern fullscreen-style panel, customize the opening position and width, and style the menu button, closing icon, and panel appearance.

## How to Add an Offcanvas Block

### Step 1: Add the Offcanvas Block

1. Open the page or post where you want to add the Offcanvas Block.
2. Click the **+ (Add Block)** button in the Gutenberg editor.
3. Search for **Offcanvas**.
4. Select the **Offcanvas Block** to insert it into your page.
5. Select or create a ShapeBlock Template to display inside the offcanvas panel.
6. Use the block settings in the sidebar to configure its layout, position, width, and appearance.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-79.png)

### Step 2: Configure the Offcanvas Block

Select the Offcanvas Block and open the block settings in the sidebar. The available tabs are:

- **Settings:** Choose the offcanvas layout, configure the opening position, select a template, and customize the opener and closing icons.
- **Layout:** Set the canvas width for desktop, tablet, and mobile devices.
- **Style:** Customize the opener icon, closing icon, panel background, padding, and blur effect.
- **Advanced:** Configure spacing and background settings for the entire Offcanvas Block.

## Settings Tab

### 1. Offcanvas Settings

- **Offcanvas Layout:** Choose the layout of the offcanvas panel.
  - **Classic:** Displays a side panel that opens from the left or right.
  - **Modern:** Displays a modern panel with fullscreen-style behavior and configurable opening animation.
- **Canvas Menu Text:** Enter the text displayed on the opener button. Leave it empty if you want to use the icon without text.
- **Menu Icon:** Choose the opener icon. This option is available when the **Classic** layout is selected.
- **Open Position:** Choose how the panel opens.
  - For **Classic:** Select **Left** or **Right**.
  - For **Modern:** Select **Fade in place**, **From left**, **From right**, **From top**, or **From bottom**.
- **Select Template:** Select a published ShapeBlock Template to display inside the offcanvas panel.
- **Edit Template:** Open the selected template for editing. This option appears when a template is selected.
- **Create New Template:** Open the template editor to create a new ShapeBlock Template. If no templates are available, create one before selecting it.
- **Close Icon:** Choose the icon used to close the panel. This option is available when the **Classic** layout is selected.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-80.png)

## Layout Tab

### 1. Canvas

- **Canvas Width (px):** Set the width of the classic offcanvas panel in pixels. The width can be configured separately for desktop, tablet, and mobile devices.
- **Canvas Width:** Set the width of the modern offcanvas panel for desktop, tablet, and mobile devices.
  - Leave the value empty to use the full screen width (**100%**).
  - Enter a number to set the width in pixels.
  - You can also use CSS width values such as `80%` or `60vw`.

## Style Tab

### 1. Opener Icon

- **Text Color:** Set the color of the opener button text. This option appears when Canvas Menu Text is not empty.
- **Typography:** Customize the opener button text typography. The settings can be configured separately for desktop, tablet, and mobile devices. This option appears when Canvas Menu Text is not empty.
- **Hamburger Color:** Set the color of the opener icon. The available icon styling depends on the selected layout.
- **Hamburger Size (px):** Set the size of the opener icon in pixels.

### 2. Closing Icon

- **Icon Color:** Set the color of the closing icon.
- **Icon Size (px):** Set the closing icon size in pixels. This option is available when the **Classic** layout is selected.

### 3. Offcanvas Item

- **Background:** Set the background color or gradient of the offcanvas panel.
- **Padding:** Adjust the inner spacing of the panel. Padding can be configured separately for desktop, tablet, and mobile devices.
- **Enable Blur:** Enable the blur effect behind the offcanvas panel.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-81-1024x352.png)

## Advanced Tab

The Advanced tab controls spacing and background settings for the entire Offcanvas Block, not the content inside the selected template.

### 1. Spacing

- **Padding:** Set the outer padding around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.
- **Margin:** Set the outer margin around the Offcanvas Block. Values can be configured separately for desktop, tablet, and mobile devices.

### 2. Background

- **Background Color:** Set the background color of the entire Offcanvas Block.