What is a Breadcrumb?

Location-based breadcrumb navigation links serve as an effective visual aid, helping website visitors orient themselves on your site. The text links display horizontally near the top of the page (see example below).

Breadcrumb trails cannot replace a conventional menu, but are useful as an additional navigation tool for sections of websites with a complicated structure or a wide variety of pages and categories. For example, a site with a hierarchy of three or more levels could use breadcrumbs to provide an enhanced user experience, allowing users to navigate to higher-level pages with one click.

Should Breadcrumbs be used on all websites?

Not all websites require breadcrumbs because the main menu, secondary navigation, and additional elements (like the right sidebar) provide all the options necessary for users to navigate the site. Also, sites that do not have a logical hierarchy or grouping should not use breadcrumbs.

How can I add Breadcrumbs to my Novi website?

If you decide that a breadcrumb trail would be useful for your website, reach out to the Novi team via Intercom so our designer can add this static region to your webpages. This involves some custom styling, so we will provide you with a quote. Once the functionality is added, you can go to any pages that would benefit from breadcrumbs and add the links.

What else do I need to know about Breadcrumbs on Novi websites?

  • The static region for breadcrumbs will take on the formatting of your website's hyperlink styles. Note that each page template has its own style set.
  • By default this html region is hidden. Once it's added to a site, an admin will need to add the links manually (the links do not pre-populate).

Best Practices & Tips

  • Breadcrumbs are an extra feature, and should not replace the primary navigation.
  • Adding the current page to the breadcrumb trail is optional. If the current page is listed, it should not be linked/clickable.
  • Shorten the link names - they do not need to be an exact match to the page title.
  • Use arrows to separate the links (Link 1 > Link 2 > Link 3).
  • Include a step in your website process(es) to update the breadcrumb links (as needed) when content is changed on your site. 
  • If your website content is updated often, a periodic review of the entire site will help you catch any issues, like broken links or inaccurate breadcrumb trails.
Did this answer your question?