A responsive panel navigation for mobile and desktop

FlexPanel is a responsive, lightweight, jQuery/CSS3 plugin for creating a scrollable, sliding panel navigation system.



Swipe Controls

Swipe Controls

With the help of hammer.js you can swipe to interact with the Flexpanel menu.

CSS3 Animations


There are no jQuery animations here. All animations are controlled by CSS3 properties.

Fully Responsive

Fully Responsive

From mobile applications to desktop websites, FlexPanel can handle your navigation.


HTML Structure

Example site structure includes a site containing div, a content wrapper and an instance of FlexPanel.

<div id="container">
	<div id="wrapper">
		// All site content here			
	<nav class="flexpanel">
		<div class="viewport-wrap">
			<div class="viewport">
				// Your Flexpanel menu would be here

Basic Init Method

FlexPanel's initiate method in it's most simplest form.


Advanced Method

Passing configuration paramaters to FlexPanel. More info.

    animation: 'slide',
    direction: 'right',
    wrapper: '#wrapper',
    button: '.flex-btn',
    maxWidth: '768'

Public Functions

Open Try Me

Open FlexPanel from any element on the screen.


Close Try Me

Close FlexPanel from any element on the screen.


Toggle Try Me

Toggle FlexPanel Open/Close.




FlexPanel accepts the following configuration parameters:

    animation: 'slide', // 'slide' | 'reveal'
    direction: 'right', // 'left' | 'right'
	wrapper: '#wrapper', // Define the main content wrapper
	button: '.flex-btn', // Define the menu button
	maxWidth: null // Max viewport width for FlexPanel, null = always showing, e.g. '768'.



  • [→] Slide in panel in from left
  • [←] Slide in panel from right


View Example

  • [→] Reveal from left

Development Notes

  • Panel reveal animation is now available!
  • Browser and device testing is ongoing. Below is an early list of supported browsers.
    • Mac: Firefox, Safari, Chrome
    • PC: IE 9, IE 10, IE11, Firefox
    • iPhone iOS 6: Safari, Chrome
    • Various Android Devices, Windows phone, BB10
  • Multiple FlexPanel instances on the same page are currently not supported.
  • The ability to drag panel open and closed in currently in development.
  • Submit issues via GitHub Issues
  • Pull requests and contributions to the project are encouraged. Download the source from GitHub


September 2, 2014

  • Updated Hammer JS to version 2
  • Removing deprecated functions from jquery.flexpanel.js

March 14, 2014

  • Added reveal animation
  • Fixed bug with left slide
  • Removing MaxWidth parameter as it's no longer needed
  • Fixed bug with fixed position element and translate3D CSS3 property
  • Added variable.scss file to contain width variables for the panel and breakpoints
  • Separated Sass mixins into their own file.

March 10, 2014

  • Added Gruntfile.js and package.json
  • Added fix for IE8 and IE9.