raoul2000/yii2-slideout-widget The SlideOut widget is a wrapper around the slideout.js plugin, a touch slideout navigation menu for your mobile web apps



The Slideout widget is a wrapper around the slideout.js plugin,

...A touch slideout navigation menu for your mobile web apps.


The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist raoul2000/yii2-slideout-widget "*"

or add

"raoul2000/yii2-slideout-widget": "*"

to the require section of your composer.json file.


Using Slideout widget is easy : you need some markup and some CSS (snippets below are retrieved from the sideout.js demo site) :

The markup

<nav id="menu">

<main id="panel">


body {
  width: 100%;
  height: 100%;

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: none;

.slideout-panel {
  z-index: 1;

.slideout-open body {
  overflow: hidden;

.slideout-open .slideout-menu {
  display: block;

And then eventually, the Slideout widget, and somewhere in the page a button to open/close the menu :

    echo raoul2000\widget\slideout\Slideout::widget([
    'pluginOptions' => [
        'panel' =>  new yii\web\JsExpression("document.getElementById('panel')"),
        'menu' => new yii\web\JsExpression("document.getElementById('menu')"),
        'padding' => 256,
        'tolerance' => 70

<!-- This button will open/close the side menu -->
<button onclick="yii2_raoul2000_slideout.toggle();">toggle menu</button>

The javascript variable yii2_raoul2000_slideout has been created by the widget so you can access the slideout menu instance from anywhere in the page. In the example above, the onclick handler invokes toggle() which is part of the slideout API.

You may also note that both option panel and menu are expected to be JS objects (and not selectors).

For more information on the plugin options, please refer to slideout github page.



yii2-slideout-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.


version 1.0.0

version 0.0.2

  • remove composer dependency to bower-asset/slideout and use local asset. This is because bower/slideout was not correctly installed in vendor/bower (to investigate)
  • include sliedout 0.1.5 (10 Mars 2015)

version 0.0.1

  • Initial release


GitHub Stars
GitHub Forks


No stable releases.


No stable releases.

BSD-3-Clause license
2 github stars & 1 github forks
0 downloads in the last day
2 downloads in the last 30 days
242 total downloads