Breadcrumbs is a navigational structure contains collection of links that helps users to browse through the website easily. This helps the user to know at any point of time where exactly he is on the site and move to up or down the level structure directly. Smaller sites with single category or independent pages may not require an additional breadcrumb navigation since the site’s menu can satisfy the navigational need of an user. But bigger sites with large number of categories and parent-child page structure needs additional breadcrumbs to inform users where exactly the current page is located relative to the whole site.
Interested users can go to upper or lower level to find relevant content which may not be possible without breadcrumbs in place.
Importance of Breadcrumbs
Besides helping users, breadcrumb structure is also shown in search engine results pages of Google and Bing. Search engines like Bing shows the link of the breadcrumbs in search results so that users can directly go to that category instead of a specific page.
How to Add Breadcrumbs?
The easy way to add breadcrumbs to your site is to use a theme offering this feature by default. Content management systems like self-hosted WordPress offers plugins to insert customized breadcrumb above the article heading. If your site builder does not offer such a function then you need to add it manually on each page by using HTML anchor tag. For example, site builder tools like Weebly does not offer themes with default breadcrumbs. Hence you need to add it on each page separately with custom HTML / CSS.
Examples of Breadcrumbs
Though breadcrumb is generally placed as a horizontal link below or above the title of a page, it can have a vertical or horizontal structure depending on the site’s navigation structure. Below is the examples of breadcrumbs showing how easy it makes the users to browse through the site.
In this website we use Yoast SEO plugin to show the horizontal breadcrumbs above each post title. Since we have lot of categories this help us to group the articles to the relevant category and show it in search engines. The advantage is when an article is grouped with multiple categories you can choose which category should be shown in the breadcrumb as primary category.
The Yoast SEO breadcrumb will be simple text based and you can add box and shadow using the below CSS:
#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}Custom CSS Breadcrumbs
You can add custom CSS breadcrumbs especially when your site has smaller number of pages. Below is a horizontal CSS breadcrumbs which can be added on your site. Checkout our article on how to add this breadcrumbs to your Weebly site.
CSS Breadcrumb Style 1
CSS Breadcrumb Style 2
CSS Breadcrumb Style 3
CSS Breadcrumb Style 4
CSS Breadcrumb Style 5
Bonus CSS Breadcrumb Style 6
- Site Building
- Weebly
- Weebly Tips & Tricks
- Current Page Title
Breadcrumbs is also referred as cookie crumb or breadcrumb trail.