A slideout menu for navigating reveal.js presentations

Created by Greg Denehy / @gregdenehy

Hey There

Have you ever used reveal.js and wanted jump
somewhere else in your presentation?

The slide overview is great but perhaps you want to
change slides without your audience seeing everything.

Perhaps you need to quickly change the
theme without editing the slide source.

Give reveal.js-menu a try

See the    in the corner?

Click it and the menu will open from the side.

Click anywhere on the slide to return to the presentation,
or use the close button in the menu.

If you don't like the menu button,
you can use the slide number instead.

Go on, give it a go.

The menu button can be hidden using the options,
but you need to enable the slide number link.

Or you can open the menu by pressing the m key.

You can navigate the menu with the keyboard as well.
Just use the arrow keys and <space> or <enter> to change slides.

You can disable the keyboard for the
menu in the options if you wish.

Left or Right

You can configure the menu to slide in from the left or right


The slide markers in the menu can be useful to show
you the progress through the presentation.

You can hide them if you want.

You can also show/hide slide numbers.

Slide Titles

The menu uses the first heading to label each slide
but you can specify another label if you want.

Use a data-menu-title attribute in the section element to give the slide a custom label, or add a menu-title class to any element in the slide you wish.

You can change the titleSelector option and use
any elements you like as the default for labelling each slide.

Vertical Slides

The menu indents your vertical slides so it's easy to see the structure of your presentation.

Down arrow

Next slide down

At the bottom

Up arrow


The menu can also be used to change the
theme of your presentation.

Just click the Themes button at the top of the menu.

The list of themes can be configured in the options.


You can also change the default
transition style from the menu.

Custom Panels

Create your own custom menu panels where
you can add your own html content.

Custom panels support menu items so you
can create your own menus that look and
behaviour just like the other menus.

Speaker View

The menu works independently in the speaker view.

You can changes slides without your audience
seeing you doing any of it.


Download reveal.js-menu and add it to your plugin folder

Have a look at the source code & documentation

And don't forget to check out Reveal.js if you haven't already

Fork reveal.js-menu on GitHub