What is Bread Crumbs?
Bread Crumbs – Links at the top of a web page or in a search result, that better help the user navigate the site. Onsite links often appear near the web page’s title and look something like this: Home > Services > Specific Service.
Breadcrumbs can also be found in search results through specific schema markups. These help users find related pages from the search result listing.
Breadcrumb navigation is a way for users to visualize their location on a website. It’s a secondary navigation bar that typically appears as horizontal text links, separated by the “greater than” symbol (>). Breadcrumb navigation improves the findability of your landing pages, and helps users reach higher-level pages faster if they initially found your site from search or a deep link.
Breadcrumb Navigation Tips
Only use breadcrumb navigation if it makes sense for your site’s structure.
Breadcrumb navigation has a linear structure, so you only want to use it if it makes sense with your website’s hierarchy. If you have lower-level pages that are accessible from different landing pages, using breadcrumb navigation will only confuse readers who keep accessing the same pages from different starting points. Additionally, if your site is relatively simple, with only a few pages, you probably don’t need breadcrumb navigation.
Don’t make your breadcrumb navigation too large.
Your breadcrumb navigation is a secondary tool to your primary navigation bar, so it shouldn’t be too large or prominent on the page.
Include the full navigational path in your breadcrumb navigation.
Even if users didn’t begin on the homepage, you want to give them an easy way to explore your site from the beginning.
Progress from the highest level to lowest.
It’s important your breadcrumb navigation reads left to right, with the closest link to the left being your homepage, and the closest link to the right being the user’s current page. A study by Nielsen Norman Group found users spend 80% of their time viewing the left half of a page and 20% viewing the right half, making a strong case for left-to-right design. Plus, the link closest to the left will appear as the beginning of the chain, so you want it to be your highest-level page.
Keep your breadcrumb titles consistent with your page titles.
To avoid confusion, you’ll want to remain consistent with your page and breadcrumb titles, particularly if you’re targeting certain keywords in those titles. You also want to clearly link your breadcrumb titles to the page. If the breadcrumb title doesn’t have a link, make it clear.
Get creative with the design.
The traditional breadcrumb navigation looks like this: Home > About Us > Careers. However, you don’t need to follow the traditional path if you feel a different design could appeal more to your audience or look better on your site.
Keep it clean and uncluttered.
Your breadcrumb navigation is simply an aid for the user, and ideally shouldn’t be noticed unless the user is looking for it. For this reason, you don’t want to clutter your breadcrumb navigation with unnecessary text.
Consider which type of breadcrumb navigation makes the most sense for your site.
There are a few different types of breadcrumbs you might use — location-based, attribute-based, and history-based. Location-based breadcrumbs show the user where they are in the site’s hierarchy. Attribute-based breadcrumbs show users which category their page falls into. Finally, history-based breadcrumbs show users the specific path they took to arrive at the current page.
Best practices in Bread Crumb
Best practices in breadcrumb navigation urge web designers to place the navigation at the top of the page. Consider your customers’ needs and implement A/B testing if you’re unsure.
« Back to Glossary Index