This type of navigation reduces the number of actions a website visitor needs to take in order to get to higher-level pages.
It improves the findability of website sections and is an effective visual aid for indicating the location of the user within the hierarchy of the website layout.
The EverWeb Widgets website has several hundred pages so a site navigation would be huge, unwieldy and more likely to lose the visitor than help them know where they are and how to get back to where they were.
Breadcrumbs navigation is almost always used on larger sites with directories and sub directories as a visual aid to the visitor's location within the site as well as a means of navigation.
This navigation is created using HTML and CSS so there are no images to download.
Links
The navigation can have up to four tabs for home, directory, sub directory and page name. The sub directory link is optional since most EverWeb users won't require it. EverWeb can create sub directories but most users won't need them even for fairly large sites.
The tabs are inline when viewed on computers and tablet devices and switch to a vertical block layout on mobile phones.
The chevrons which separate the tabs are created using a CSS psuedo element and have their own control for setting the color independent of the font color.
The navigation can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The font size, color and hover color are adjustable and the background color has an opacity slider for use when the breadcrumbs overlay an item as in this example.
The home icon is created using three different CSS shapes and two colors. Both the house and the door can have their colors changed.
Position
The navigation can be positioned anywhere on the design canvas and can be aligned left, center or right. Their is a control for adjusting the vertical spacing from the top and the container background is also adjustable for background color and its opacity.
Mobile Phone
When viewed on phones, the navigation tabs stack vertically and the separators switched to a chevron down. The separators can be remove if required by checking a box.
Overlay
The example on this page is positioned below the hero image on the EverWeb design canvas but appears as an overlay at the top on the published page. This is achieved by checking a box which changes it's position from relative to absolute.