EverWeb Widgets - Active Navigation

Vertical Active Navigation
Vertical Active Navigation Widget

Styling & Link Options

The vertical navigation can have up to twelve items. The last two can be configured as external links if required with the option to open them in a new window.
The navigation can use non web safe and Google hosted fonts since there is an option for including a web safe fallback font.

The tabs have options for font color and background, hover font color and background and active font color and background. The active tab can also have text decoration with options for underline and line through.
The tabs can have a vertical spacer and there is a checkbox for removing the background by making it transparent in all states.
The container can be styled for background color with variable opacity if required and has controls for adding a border and/or box shadow.
The container border can be radiused after adding some overall padding.

NOTE: When setting up the navigation, the tabs will display the active colors until the "Link to:" pages have been selected. As with hover colors, the active color will then not be displayed on the EverWeb design canvas. Use the Preview button to test the design in the browser.

Vertical Active Navigation Widget
Vertical Active Navigation Widget

Widget Settings

Set the navigation to the required size using the drag handles or the Metrics inspector.
Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size, color, text align and background color.
Set the hover color and background color.
Set the current page link's color, background color and text decoration.
Set the navigation tab's top/bottom and left right padding and adjust the horizontal separator if required.

Container Settings

Set the container background color and adjust its opacity if required.
Set the container's overall padding.
Set the border width, color and corner radius if required.
Set the box shadow color and radius if needed.

Navigation Links

Enter the text and choose the "Link to:" page for the first three items.
Add more items by checking the box.
The last two items can be configured as external links.
Check the box to show the item, enter the link text, check the box for an "External Link" and enter the URL.
Check the box if the link is to open in a new window.

This widget is included in the Navigation-2 widget pack.