> For the complete documentation index, see [llms.txt](https://docs.jollyany.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jollyany.co/templates/newspaper/off-canvas-menu.md).

# Off-canvas menu

On the demo, when clicking on the burger button (or 3 line button) on the right, an off-canvas menu will appear on the left like the image below.

![](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FQPwV8SZRr9KjepBPW6na%2Foff-canvas.jpg?alt=media\&token=83e03731-a03c-48eb-b4b8-95135a6420bb)

### Enable / Disable Off-canvas menu

* Please go to admin > System > Site template styles > Choose your style > template options > Header > Scroll down to the section "Off-canvas menu" > enable / disable it.
* Here you can configure the panel width, off-canvas direction, toggle visibility ...

### Create an off-canvas module

* Go to admin > Extensions > Module > Add a new module 
* Module type: SP Page Builder
* Module position: **off-canvas** 
* Add a new row and use Jollyany add-on: **UI Articles**

{% hint style="info" %}
This module must be assigned to the position "***off-canvas***", so it can display properly in the off-canvas menu. 
{% endhint %}

![](https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FxiKYTZnTTJA0ZgohJgk9%2Foff-canvas2.jpg?alt=media\&token=ddb364ed-44ed-4b53-bdca-b7702e7a136a)

### <br>