A JavaScript library to create additional space
especially for mobile layout.



Press to open the offcanvas menu


  • Not affected by the DOM structure.
  • Enable to open both right and left side menu.
  • Main canvas is not scrolled, while scrolling Offcanvas-menu.
  • Easy to control the movement
  • Accessible for keyboard navigation and screen readers.

Quick start

Using CDN

In addition to downloading and loading CSS and JS files,
you can easily start by using CDN.

Add the following description in the <head> tag of the web page you want to use hiraku.

<link rel="stylesheet" href="https://unpkg.com/hiraku@latest/css/hiraku.min.css">
<script src="https://unpkg.com/hiraku@latest/js/hiraku.min.js"></script>

Using npm

npm install hiraku --save

Can bundle with Webpack/Browserify

import Hiraku from 'hiraku';
new Hiraku('.js-hiraku');


Some options are available when making new instances like below.

new Hiraku('.js-hiraku', {
  width: '70%'
name default description
breakpoint -1 (px) When to enable offcanvas feature
btn .js-hiraku-offcanvas-btn Open offcanvas menu When this btn is clicked
direction right Open Offcanvas-menu from left or right
closeBtn .js-hiraku-close-btn Close offcanvas menu when this btn is clicked
fixedHeader .js-hiraku-fixed-header If your site has a fixed-header then you have to specify the selector
width 70% offcanvas menu width


Some methods are available with instances like below

const hiraku = new Hiraku('.js-hiraku', {
  width: '70%'
hiraku.open(); // open offcanvas menu
hiraku.close(); // close offcanvas menu


Some event-listeners are available with instances like below

const hiraku = new Hiraku('.js-hiraku', {
  width: '70%'
hiraku.on('open', () => { // when offcanvas menu is opened
  // some functions here
hiraku.on('close', () => { // when offcanvas menu is closed
  // some functions here

View on GitHub

hiraku was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page