Demos

On this page you can find a list of HyperNav demos.

HyperNav Complete Demo

A demo that showcases the most of what HyperNav is capable of. Due to the complexity of HyperNav and the showcase nature of this demo, several elements behave differently from each other. For example, some buttons are "full buttons" and some are "split buttons". Mixing different types of elements is not recommended in a real project. This demo is not entirely keyboard accessible (or rather it is, but the fact that arrow keys must be used is strange).

/+/testing/complete.html

HyperNav Natural Demo

A demo that is more keyboard accessible than the HyperNav Complete Demo. Due to the complexity of HyperNav and the showcase nature of this demo, several elements behave differently from each other, just like the HyperNav Complete Demo.

/+/testing/natural.html

HyperNav No JavaScript Demo

The demos above use JavaScript to provide theme switching logic and an IE11 CSS variable polyfill. This demo does not use any JavaScript, otherwise it is the same as the HyperNav Complete Demo.

/+/testing/no-js.html

Nested Iconified Side Navigation Menu (Full Button Demo) UI & UX Concept

This demo features a HyperNav side navigation menu, but is more of a UI & UX demo, rather than a demo of HyperNav. The demo features only full expand items.

/+/testing/nested-iconified-side-nav-menu-full-buttons.html

Nested Iconified Side Navigation Menu (Split Button Demo) UI & UX Concept

This demo features a HyperNav side navigation menu, but is more of a UI & UX demo, rather than a demo of HyperNav. The demo features only split expand items. Additionally, some enhancing JavaScript (not bundled with HyperNav) is used to improve the user experience.

/+/testing/nested-iconified-side-nav-menu-split-buttons.html