Nitesh edited this page Apr 18, 2018 · 8 revisions

Welcome to the jQWaffle wiki!

A jQuery implementation of the Waffle navigation in Office 365.


  • Bootstrap Top navigation included. ( Bootstrap v3.3.7 ( ).
  • Responsive.
  • User Account dropdown menu included on right side.
  • Lightweight, no dependencies
  • Cross-browser and platform
  • Customizable look and feel.


Where is it being tested?

  • Microsoft Internet Explorer 10+ (Standards Mode)
  • Google Chrome
  • Mozilla FireFox
  • Apple Safari
  • Opera
  • iOS
  • Android

Download source code

Download Link -

Install via bower

jQWaffle.js can be installed using bower.

$ bower install jqwaffle

Download Dist Folder

Included in HTML

The navbar HTML markup for topbar navigation, admin slide and waffle menu slide.

Included in CSS

<!-- included the core styles -->

<link rel="stylesheet" href="PATH_TO_FILE/waffle.css" />

Included in JS

<!-- included the core styles -->

<link rel="stylesheet" href="PATH_TO_FILE/waffle.js" />

For source code and customization refer the src folder

Default Usage In Js:-

Initiaization- $('body').jQWaffle();

Initiate Default Functions:-

Open Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'open', });

Close Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'close', });

Toggle (Show/Hide) Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'toggle', });

Open Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'open', });

Close Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'close', });

Toggle (Show/Hide) Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'toggle', });

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.