HyperNav Natural

Theme: Default

This is an example that showcases a natural menu layout built in HyperNav. The layout contains some inconsistencies (such as different types of dropdown menus) for complete coverage. This layout should be extended if needed and used as a testing ground for HyperNav.

The complete spectrum of color options, which can easily be controlled by variables, is not showcased in the default theme. See the technical theme for a more complete assessment of how colors can be utilized. Note that the technical theme is also incomplete in regard to what can be achieved with HyperNav from a coloring perspective.

This example is keyboard accessible.

Note: No JavaScript, except a CSS variable ponyfill for IE11 and theme switching logic, is utilized on this page. Everything is built with HTML and CSS.

Important

This page should be viewed so that:

Viewport width >= 250px

Links

HyperNav documentation
Acmion

HyperNav Examples

HyperNav Complete
HyperNav Natural
HyperNav No JavaScript

HyperNav Themes

Details

This section describes how the behavior of various items differ from each other.

Terminology

Some explanations for some of the terms used below.

Split Button

A button that has a link and a secondary button. These items can be navigated to. Note that all the links on this page have href="#none", which means that no navigation will occur.

Full Button

A button that is only a button. Clicking anywhere on full buttons will toggle a state. These items can not be navigated to.

Top Navigation Menu

The top navigation menu is a standard navigation menu that supports a wide variety of content.

Home

Navigation item with an icon. Is always visible, regardless of device.

Side Menu 1

Toggles the visibility of a side menu. Is always visible, regardless of device.

Side Menu 2

Toggles the visibility of a side menu that is offsetted from the top. Not really a good combination with the hamburger menu on the current page, but the menu is still showcased for coverage.

About

Navigation item without an icon.

Countries

Mega menu without an icon. Split button. Custom content.

Products

Dropdown menu that expands to the right. Different expand icon for mobile and desktop. Split button.

Team

Dropdown menu that expands to the center. Full button. Not hoverable (the button has to be pressed).

Shipping

Dropdown menu that expands to the left. Delay animation. Split button. Child item (National) is marked as active, which should represent the currently active page.

Contact

Dropdown menu that expands to the left. Delay animation. Expand only on hover on desktop and clickable on mobile.

Settings (Cog)

A mode that reveals new items below the top navigation bar.

Search (Magnifying Glass)

A mode that overrides the top navigation bar.

Menu (Three Bars)

Hides and reveals the main top navigation content on mobile devices. Only visible on mobile.

Left Side Navigation Menu

A side menu that can be collapsed to icons. The menu does not require icons for the navigation items, but they should almost always be added. A letter as an icon works.

Collapse

Collapse and expand the side navigation menu.

Space Exploration

Navigation item with an icon.

Nebulas

Dropdown menu with one sublevel. Full button.

Stars

Dropdown menu with several sublevels. Full button.

Planets

Dropdown menu with one sublevel. Split button. This button is hard to use in the collapsed state, because the small plus sign has to be clicked. With some JavaScript the behavior could be improved.

Multiline Item

Navigation item with content that spans multiple lines. Has an icon.

Multiline Dropdown

Dropdown with content that spans multiple lines. Has an icon. Split button.

Right Side Navigation Menu (Centered on mobile)

A standard vertical navigation menu without anything too fancy. The menu does support icons, but they are not as critical as in the collapsible side menu.

Flowers