Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A quirky, interactive feature tour using grumble.js for steps along the way.

See the live demo here.


Crumble works as a jquery plugin, the meta information for the tour is stored as a standard ordered list in the page HTML.

Basic Usage

<ol id="tour" style="display: none;">
  <li data-target="#one" data-angle="130">
    The first step in the tour
  <li data-target=".two" data-options="distance:20">
    This is the second step in the tour

The text of each list element becomes the tour text, this is best kept as short as possible. The possible parameters are:

  • data-target: A selector that tells the tour which element on the page to point at. (required)
  • data-angle: An override for the angle of the bubble between 0-360 (optional)
  • data-options: A list of options that will be passed to grumble seperated by semicolons. (optional)


Crumble can take a range of options to customise it's behaviour and look.

  • scrollSpeed: the speed at which the page will scroll into position if a tour step is off screen.
  • grumble: this object gets passed straight to grumble.js and can include any of the options outlined here
  • onStep: this callback gets triggered every time the user moves forward in the tour
  • onStart: this callback gets triggered at the beginning of the tour
  • onFinish: this callback gets triggered when the tour ends
  scrollSpeed: 'fast',
  grumble: {
    distance: 40
  onStep: function(){
    console.log('you moved forward');
	onStart: function(){
    console.log('you started the tour');
	onFinish: function(){
    console.log('you finished the tour');

License / Credits

Crumble is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with Crumble. More Information

Crumble depends on and was inspired by Grumble.js


Releases are available for download from GitHub.


Crumble makes it easy to create feature tours in your website or app.



No releases published


No packages published
You can’t perform that action at this time.