Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
August 16, 2021 16:49
January 19, 2021 17:04
February 24, 2019 15:59
January 19, 2016 09:40
October 29, 2013 12:29
January 19, 2016 09:41
July 24, 2017 11:12
January 19, 2021 17:05


A responsive sidebar plugin for Leaflet, a JS library for interactive maps.

Please also have a look at sidebar-v2, the tabbed successor of this library.

Flattr this


Basic example

Examples are available in the examples folder and on Github Pages:

Using the plugin

See the included examples for usage.


Add a content container somewhere in your document:

<div id="sidebar">

Create a new L.Control.Sidebar and add it to the map:

var sidebar = L.control.sidebar('sidebar', {
    position: 'left'


The sidebar will be hidden on startup, use the following methods to show or hide it:

// Show sidebar;

// Hide sidebar

// Toggle sidebar visibility

// Check sidebar visibility
var visible = sidebar.isVisible();

If you want the sidebar to be visible on startup use the following snippet after adding it to the map:

setTimeout(function () {;
}, 500);

Do not call show() directly after adding the control to the map. The setTimeout will work around some CSS quirks for you.

The content of the sidebar can be changed dynamically:

sidebar.setContent('test <b>test</b> test');

If you need more flexibility you can use sidebar.getContainer() to get the content container element or use e.g. jQuery on the <div id="sidebar"> element.


The sidebar can be configured with these options:

  • position: Can be left (default) or right and shouldn't need explaining.
  • closeButton: Can be true (default) or false. If true a close button will be added to the sidebar.
  • autoPan: Can be true (default) or false. If true the map will be shifted when the sidebar is shown.


Whenever the visibility of the sidebar is changed, an event is fired on the sidebar instance. You can listen for these events like this:

sidebar.on('hidden', function () {
    console.log('Sidebar is now hidden.');

Available events:

  • show: Show animation is starting, sidebar will be visible.
  • shown: Show animation finished, sidebar is now visible.
  • hide: Hide animation is starting, sidebar will be hidden.
  • hidden: Hide animation finished, sidebar is now hidden.

Note that the shown and hidden events depend on transitionend/webkitTransitionEnd which might not be supported by all browsers yet.


leaflet-sidebar was developed to work with Leaflet 0.6.4 and should work fine with v0.7 too. I have no information whether it works well with older versions.

The leaflet-sidebar plugin has been tested on the following systems and browsers:

  • Ubuntu: Firefox, Chrome
  • Mac OS X: Firefox, Chrome, Safari
  • Android 4.3: Firefox, Chrome, Opera
  • iOS: Safari
  • Windows XP: Internet Explorer 6 (failed!)


leaflet-sidebar is free software, and may be redistributed under the MIT license.