EverWeb Widgets

Navigation

The EverWeb default navigation and those built into the responsive and mobile header widgets should cover most situations. The navigation widgets on this page are designed to supplement or replace these in situations where a different or special purpose navigation is required.
The mobile version of the website needs a navigation system that is compact and can be easily tapped using a finger tip. Navigation links need to be at least 28px in height and 32px wide for fingertips and 42px wide for thumbs.
A better solution is to use a navigation which is built into a full width, responsive header. The Responsive Header widget can be used on botht the full site and the mobile version.
A Mobile Header Navigation is a better option for single level sites and the Dual Navigation Header can be used for mobile sites with directories.
Click any widget icon to see the demo …

View CartAdd To Cart

Horizontal Navigation

A horizontal navigation which can be styled as inline with optional separators or as tabs with controls for border width, color, radius and spacing.
The navigation can indicate the current page with a contrasting color if required.
The menu can be arranged to scroll with the rest of the page and then stick at a preset distance from the top of the browser window so that it always remains in view.

Vertical Navigation

A vertical navigation with options for tab color, font color, background and background hover colors. There is an option for indicating the current page.
The container can be styled with padding, background color and opacity and border width, color and radius.
There is a scroll to fix option if the navigation is required to always remain in view.

Animated Horizontal Navigation

The navigation can be either full width responsive or fixed width with up to fourteen links. The last two links can be configured as external links to open in a new window.
The navigation has an option to indicate the current page. The hover animation is created by adding a bottom border which increases from zero to 100% over time.

Animated Vertical Navigation

The vertical navigation can have up to fourteen links. The last two links can be configured as external links to open in a new window. It can be used in conjunction with the horizontal version to create two level navigation for sites with directories.
There is a current page option and a left to right animation on hover with an optional indicator.

Breadcrumbs

Breadcrumbs are used on large sites to let visitors know where they are and quickly return to a category page or the home page. The demo pages on this website use breadcrumbs rather than a huge and complicated navigation menu.
The home icon and chevrons are styled with CSS rather than using images so that the navigation is efficient and doesn't slow the page download time.

Navigation Tab Link

The tab link has been designed to complement the click drop navigation widget for creating tab menus which are suitable for a full site which will also be viewed on tablets where the links need to work using a fingertip.
This widget creates a single, top level link which can be configured to open internal or external pages with a new window option.

Click Drop Navigation

Clicking or tapping the tab opens/closes a dropdown navigation which can be used to navigate a single level site or used to navigate a directory of a larger site.
The widgets can be laid out horizontally or vertically and used in combination with the Navigation Tab Link to create a complete navigation system.

Side Links

These links are for essential items which need to always remain in view such as phone, email contact and so on …
On computers, the side links appear as icon tabs stuck to the left. They slide out on hover to reveal a text link.
When viewed on mobile devices, the links appear as inline tabs stuck to the bottom of the device window.
The icons are created using Font Awesome which has a choice of almost 700 web related icons.

Mobile Icon Navigation

The "hamburger" icon is clicked or tapped to expose an animated dropdown with links to internal pages. The last two links can be configured as external links if required.
The icon position can be left or right in relation to the drop down and the icon itself has controls for varying the background color and its opacity, rounding the corners and setting the icon color.

Mobile Icon Sub Navigation

This creates a sub navigation where the mobile version of the site has directories.
Like the main navigation version, the drop down can be styled for color, background color and opacity, separator and border.
Both widgets have the option to indicate the current page with a contrasting color.

Mobile Menu Navigation

This is a tap to open/close drop down navigation menu for mobile websites which is similar to the Icon Navigation in style and features.
Instead of an icon, the tab which activates the drop down uses text which can be change for content and/or language.

Mobile Menu Sub Navigation

This is a version of the Menu Navigation for creating sub navigation menus for directories where a text tab is preferred to an icon.
The widget has an option to add a script to show the current page in a contrasting color which helps visitors to keep track of where they are on larger websites.

© EverWeb Widgets -