In-page navigation

Jump navigation provides a convenient way for users to see all sections on a page and jump between them. This can be useful for long, text-heavy pages.

When used on a page it:

finds every h2 that contains a unique id
adds the text content of those h2 to the navigation in order of appearance

Default navigation layout

The navigation will take the form of a table of contents at the beginning of the page on smaller screens, and a fixed menu on the left hand side on larger screens.

Add the following code snippet to your markup. It doesn't matter where as we have built in some logic for it to appear in the correct place.


<div class="jumpnav"></div>

You can view an example of the layout here.

Top navigation layout

If you would prefer to use the table of contents for all screen sizes, add the class top as in the example below. This layout shown on the page you're currently viewing.


<div class="jumpnav top"></div>

Page navigation is best suited for linking to other pages.