NAVX

Show offcanvas panel

Show the offcanvas panel using an external HTML element

Here's how to show the offcanvas panel using an external HTML element. In the example below we will use a button, but you can use a link or other element that you want.

1 - Follow the documentation and set up a navigation bar.

2 - Use the code below to create the button:

<button id="btn-show" type="button">Show offcanvas</button>

3 - Bind a "click" event to it:

document.getElementById("btn-show").addEventListener("click", navigation.toggleOffcanvas);

The result:

Access the documentation about methods. See the list of tutorials for other ways to modify the navigation bar and add features.