+++
[taxonomies]
section = ["Components"]
+++
# Offcanvas
## Basic
The offcanvas component serves as a sidebar that is hidden out of view until is
toggled via an interactive element. The offcanvas is composed of the following
elements:
- `msp-offcanvas`: the main container.
- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more.
- `msp-offcanvas-content`: the container for the content.
- `msp-offcanvas-header`: top section of the content.
- `msp-offcanvas-body`: middle section of the content.
- `msp-offcanvas-footer`: bottom section of the content.
To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an
element and attach the `data-msp-target` attribute.
### Example:
```html
...
```
## Responsive
It's possible to have the sidebar always visible and only hide the offcanvas
when the viewport is below the brakepoint. For this add the class
`msp-offcanvas-[breakpoint]`.
Note that the toggle and backdrop are disabled when the viewport is above the brakepoint.
### Example
```html
...
```