Offcanvas

A sliding panel component that appears from the edges of the screen, providing additional content or functionality without disrupting the main interface.

Basic Offcanvas

Create a standard offcanvas panel with a trigger button, header, and body content.

Preview Code
Basic Offcanvas
This is the offcanvas content.
php
Offcanvas Options
The Offcanvas component supports various configuration options.
  • Offcanvas::PLACEMENT_LEFT - Positions the panel at the left side (start) of the screen
  • Offcanvas::PLACEMENT_RIGHT - Positions the panel at the right side (end) of the screen
  • Offcanvas::PLACEMENT_TOP - Positions the panel at the top of the screen
  • Offcanvas::PLACEMENT_BOTTOM - Positions the panel at the bottom of the screen
  • Offcanvas::BACKDROP_DISABLED - Disables the backdrop overlay
  • Offcanvas::ESC_EXIT_DISABLED - Disables closing the panel with ESC key
  • Offcanvas::SCROLL_DISABLED - Disables scrolling of the main content when panel is open
Offcanvas Examples
Here are examples of different offcanvas options and styles.

Left Placement Offcanvas

Create a panel that slides in from the left side of the screen by using the PLACEMENT_LEFT option.

Preview Code
Left Offcanvas
This panel slides in from the left.
php

Right Placement Offcanvas

Create a panel that slides in from the right side of the screen by using the PLACEMENT_RIGHT option.

Preview Code
Right Offcanvas
This panel slides in from the right.
php

Top Placement Offcanvas

Create a panel that slides down from the top of the screen by using the PLACEMENT_TOP option.

Preview Code
Top Offcanvas
This panel slides down from the top.
php

Bottom Placement Offcanvas

Create a panel that slides up from the bottom of the screen by using the PLACEMENT_BOTTOM option.

Preview Code
Bottom Offcanvas
This panel slides up from the bottom.
php

Offcanvas Without Backdrop

Create a panel with the backdrop overlay disabled by using the BACKDROP_DISABLED option.

Preview Code
No Backdrop Offcanvas
This panel appears without dimming the background.
php

Offcanvas with HTML Content

Create a panel with rich HTML content in the body.

Preview Code
HTML Content Offcanvas
Offcanvas Content

This is a paragraph in the panel body.

php

Combined Options Offcanvas

Combine multiple options to create a highly customized offcanvas panel using bitwise operators.

Preview Code
Combined Options Offcanvas
Combined Options Offcanvas

This panel combines multiple options.

php

API

The Offcanvas component provides methods for creating and configuring offcanvas panels.
API PHP
API JS

Events

You can listen to events on the GridJS component using the boui on() method.

Common alternative names: Sidebar, Drawer, Slide Panel, Edge Panel, Sliding Panel, Side Panel, Off-screen Menu

Types: Left/Start Panels, Right/End Panels, Top Panels, Bottom Panels, No-Backdrop Panels, HTML Content Panels, Custom Option Panels

Principles

Progressive Disclosure

Offcanvas panels reveal additional content or options progressively, keeping the main interface clean and focused until needed.

Spatial Efficiency

By sliding in from the edges, offcanvas panels make efficient use of screen space without permanently taking up valuable real estate.

Contextual Presence

Offcanvas panels maintain context with the main interface while providing additional functionality or content.

Anatomy

Offcanvas Anatomy
  1. Trigger Element

    2. The element that opens the offcanvas panel

  2. Backdrop

    3. The overlay that dims the background

  3. Panel

    4. The container that slides in from an edge

  4. Header

    5. The top section with title and close button

  5. Body

    6. The main content area of the panel

  6. Close Button

    7. The element to dismiss the panel

Usage

Use offcanvas panels to provide additional content or functionality without disrupting the main interface. They're particularly effective for navigation menus, filters/sorting options, configuration panels, secondary content, detail views, and forms that don't need to block the main interface.