Canvas Docs

Side Panels

A side panel is the drawer that slides in from the edge of the screen when a visitor opens it: a hamburger menu, a contact card, a mini profile, a filter rail. In Canvas the drawer's contents are a Side Panel record you compose from blocks, the drawer's behaviour is a small set of options, and the trigger is either the built in header icon or any element you choose. Everything hangs off one master switch, which is the first thing to know about it.

Turning The Feature On

Starting screenCanvasTheme Options, the Side Panel tab.

Turn on Enable Side Panel. Every other side panel control on the site, including the panel picker on each page, exists only while this switch is on, so it comes first. The tab then offers the site wide behaviour:

  • Enable Side PanelDefaultOff

    Show a slide-out side panel on the frontend. Content is composed in the block editor (Side Panels).

  • Default Side PanelDefaultEmpty

    Select the side panel to display globally on all pages. Individual pages can override this via the Side Panel meta box.

    Shown when Enable Side Panel is on

  • PositionDefaultRight

    Which side of the screen the panel slides in from.

    ChoicesRightLeftShown when Enable Side Panel is on

  • BehaviorDefaultPush

    Overlay slides over the page content. Push shifts the page aside to make room.

    ChoicesPushOverlayShown when Enable Side Panel is on

  • Color SchemeDefaultDark

    Dark inverts the panel background and text to a dark theme. Light uses the default page background.

    ChoicesDarkLightShown when Enable Side Panel is on

  • Width (px)Default300

    Width of the side panel in pixels. Default: 300.

    Shown when Enable Side Panel is on

  • Show Header TriggerDefaultOn

    Display a hamburger icon in the header that opens the side panel. You can also add the class "side-panel-trigger" to any element to make it toggle the panel.

    Shown when Enable Side Panel is on

  • Trigger IconDefaultbi-list

    Choose a custom icon for the side panel trigger button in the header. Default: hamburger menu icon (bi-list).

    Shown when Enable Side Panel is on

Two of these deserve a decision rather than a default. Behavior is a feel choice: Push shifts the whole page aside, which reads as the site making room, while Overlay floats the panel above the content, which reads lighter and suits panels opened often. And Show Header Trigger is only one way in: any element carrying the class side-panel-trigger (added through a block's Additional CSS class(es) box) toggles the panel, so a button in the footer or a link mid page can open it too.

Composing The Panel

Starting screenthe WordPress admin menu, Side Panels (or the Manage Side Panels link on the options tab).

Choose Add New and build the drawer's contents like any page: a menu, contact details, social icons, a small form. Keep it narrow minded, in the literal sense, because everything must read well at the panel's width. Publish it, then return to the Side Panel tab and select it as the Default Side Panel.

Each record also carries its own appearance box, so a panel can differ from the site wide behaviour and take that difference with it wherever it is used:

  • Position

    Which edge this panel slides in from.

  • Behavior

    Push slides the whole page sideways; Overlay floats the panel above it.

  • Color Scheme

    Dark adds the theme's dark class to the panel.

  • Width (px)

    Leave empty to use the site-wide width.

Per Page Overrides

With the feature on, every page's edit screen carries a Side Panel panel with one select, Side Panel for this page: Global Default, None (Disable Side Panel), or any published panel. A shop section can carry a filter panel while the rest of the site carries the menu panel, and a distraction free landing page can opt out entirely.

Pitfalls

One switch and one width account for the common surprises:

  • The Side Panel panel is missing from the page editor. Enable Side Panel is off. The per page control registers only while the feature is on, so there is nothing to configure page by page until then.
  • The trigger icon is in the header but nothing opens. No panel is assigned: set a Default Side Panel, or a panel on the page itself.
  • A custom trigger does nothing. The element needs the exact class side-panel-trigger, and the feature must be on. Both halves are required.
  • The panel's own appearance seems ignored. The record's Panel Appearance values apply only where they are set; an empty control inherits the site wide option, which is what makes a panel safe to reuse across sites.

For content that appears over the page instead of beside it, see Popups. The record type's reference is Side Panels.

Was this page helpful?