In-page navigation

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

To include this feature on your page, simply add an empty div with class jumpnav somewhere in the page structure. Every h2 on the page with a unique ID is then added to the in-page navigation, in order of appearance.

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

By default the generated 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. If you would prefer to use the table of contents for all screen sizes, add the class top as in the example below. This behaviour is demonstrated on the Buttons page to better display the wide component mid-way down the page.

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

Example section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.

Nam a dui vehicula, cursus massa ut, iaculis mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in imperdiet ligula, non molestie leo. Sed venenatis a leo at facilisis. Cras purus dui, molestie nec auctor eget, semper vitae diam. Aenean eu felis eu tortor luctus consectetur in vitae nunc. Nullam ullamcorper in augue ac tempor. Nunc id justo tellus. Mauris est ligula, auctor ac maximus ac, porta et quam. Vivamus malesuada, dolor quis tincidunt efficitur, purus lorem molestie est, consectetur dictum risus mi id orci.

Example section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.

Nam a dui vehicula, cursus massa ut, iaculis mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in imperdiet ligula, non molestie leo. Sed venenatis a leo at facilisis. Cras purus dui, molestie nec auctor eget, semper vitae diam. Aenean eu felis eu tortor luctus consectetur in vitae nunc. Nullam ullamcorper in augue ac tempor. Nunc id justo tellus. Mauris est ligula, auctor ac maximus ac, porta et quam. Vivamus malesuada, dolor quis tincidunt efficitur, purus lorem molestie est, consectetur dictum risus mi id orci.

Example section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.

Nam a dui vehicula, cursus massa ut, iaculis mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in imperdiet ligula, non molestie leo. Sed venenatis a leo at facilisis. Cras purus dui, molestie nec auctor eget, semper vitae diam. Aenean eu felis eu tortor luctus consectetur in vitae nunc. Nullam ullamcorper in augue ac tempor. Nunc id justo tellus. Mauris est ligula, auctor ac maximus ac, porta et quam. Vivamus malesuada, dolor quis tincidunt efficitur, purus lorem molestie est, consectetur dictum risus mi id orci.

Example section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.

Example section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.

Example section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra ipsum eu lectus tincidunt pellentesque. Phasellus euismod tincidunt vulputate. Pellentesque tincidunt risus eu turpis dictum, vitae tincidunt nunc congue. Duis non consectetur sapien. Aliquam pretium fringilla nunc, id tristique ipsum venenatis in.