A jQuery table of contents plugin that automatically generates a floating, drawer-style, in-page navigation menu from headings.

Presets

Instead of playing around with the options below you can try some presets using the buttons.

Preset 1 Preset 2 Preset 3 Preset 4

Options

Simply select the available options from below and the menu on this page will change accordingly.

Name	Values
classes	Full Height Border Rounded Shadow
deeplinking	Whether or not to enable the deeplinking feature.
position	Top Left Top Right Left Center Right Center Bottom Left Bottom Right
theme
title	A string to display above the root menu items. This is replaced by the back button text on child menus.
top	Whether or not to display the 'To Top' button.
transition	Fade Slide
scroll	The distance the vertical scroll bar must travel before displaying FooNav.
speed	The speed FooNav is shown/hidden and the speed the menus are transitioned between.
smart	Smart options provide additional functionality to FooNav enhancing the user experience.
enable	Whether or not to enable the smart options. This disables all smart options if set to false.
anchors	Whether or not to track anchors in the page. If set to true FooNav will automatically find the item corresponding to the current top most visible anchor and display it.
close	Whether or not to close the menu when losing focus. If set to true when a user clicks anywhere on the page that is not within FooNav, it will close.
open	Whether or not to auto open FooNav on page load. If set to true and the page is scrolled past the scroll option value and a tracked anchor is visible, FooNav will be displayed.
remember	Whether or not to remember the displayed item on toggle. If set to false when FooNav is displayed or redisplayed it is reset to the root items.
scroll	Whether or not to enable smart scrolling. If set to true and a user clicks on an anchored item the page will smoothly scroll to the anchor from it's current position.

Additional Content

A simple yet robust jQuery table of contents plugin that automatically generates a floating, drawer-style, in-page navigation menu from headings (or any other elements) within the document.

CSS/CSS3

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

After CSS 2.1, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of the CSS specification and individual modules progress. CSS modules now have version numbers, or levels, such as CSS Color Module Level 5.

JavaScript

JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.

React.js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

Angular

Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Vue.js

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used by 77% of the 10 million most popular websites.

HTML

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

FooNav.js Floating Table Of Contents Plugin Playground