EverWeb Widgets HTML5

Breadcrumbs Navigation

Breadcrumbs Navigation Trail Widget

Widget Settings

Breadcrumbs navigation widget
Breadcrumbs

Leaving A Trail

Breadcrumbs are used on websites with two or more levels to help visitors know where they are in the site. They provide links to return to the first level directory or the Home page. Breadcrumbs can be placed both at the top and the bottom of each page for maximum convenience.
The page name hyperlink uses the hash sign (#) instead of a file path so it will also work as a back to the top of the page button when placed at the bottom of the page.

Widget Settings

Choose from the list of web safe fonts and set the font size. Select the arrow type. If no arrow is required, choose the blank setting at the bottom of the drop down selector panel.
Adjust the padding to increase the vertical height if required. This should be done if the breadcrumbs are to be in a mobile version of the website to make the link an easy target for fingertips.
Each link in the navigation has a box for the link text.
The directory link requires a URL which can be set using the "Link to:" selector.
The font color, font hover color and the block background color can be styled separately for each link.
The background colors can be set the same as the page content color if simple text links are needed.
The navigation as a whole can also have rounded corners if required.

Link File Paths

The navigation link file path default settings should work for most situations.
The Home Page file path goes back out of the directory to the main index.html file in the root folder.
The Directory file path goes to the index.html file inside the directory folder which should also be the first page of the directory.
The Page Name file path has a hash sign since it isn't really going anywhere. It could simply be left blank but adding the # allows it to act as a back to the top of the page link when the breadcrumbs are placed at, or near, the page bottom.
NOTE: Mobile browsers don't recognize all HTML special characters so test the design in the iOS simulator before publishing.

Get The Widget