How to create Breadcrumbs In Drupal

Breadcrumbs are also known as Breadcrumb trail , are a secondary navigation aid. Its shows user where they are on a website and where else they can go. Breadcrumbs are implemented as a small chain of hyperlinks at the top of the page , usually below the header

As a breadcrumb trail is a navigable , users can easily jump to any page within it. This type of navigation is not a replacement for the website’s main menu but a very convinient addition to it. It is especially useful for large , content heavy websites.

Types Of Breadcrumbs

• Hierarchy-based :- Based on the path they show , they are three types of breadcrumbs.
• History-based :- They show trail to the current page for higher- level ones. For example, the main category page -> a subcategory page -> a specific product page.
• Attribute-based :- They show the trail of the page a user has visited on their way to the current one.

Benefits of using Breadcrumbs

• Breadcrumb increases your website’s user friendlyness. This type of navigation is something that users love due to handly visual cues and a sense of control.
• They encourage more browsing and reduce bounce rate even if a user has reached page they are not intrested in.
• They help user reach their goals – and their goals are eventually your goals as a website owner. After all , prospective customer find what they want, they are more likely to make a conversion.
• A huge bounce is that google loves hierarchical content, so breadcrumbs help you SEO.
• While being super useful , this naviagtion element takes up a very little space and does not overload your website.

Step 1:- Install and Enables Modules.

• Breadcrumbs Module – Although Drupal 10 has built in breadcrumb functionality, you might want to use contributed modules for advanced features.
• You can use Easy Breadcrumbs module, which uses the current URL(path alias) and the current page’s title to autmatically extract the Breadcrumb’s segments and build the breadcrumbs.

Step 2:- Install and Enable easy Breadcrumbs Module.

• Go to admin drupal Extend -> Easy Breadcrumbs.
• Check the module.
• Click to enable the particular module.

Step 3:- Checking the out-of-the-box display.

Note :- The Easy Breadcrumbs has used this path to generate the breadcrumbs trail. We can see it right below the header as we view this page. Every part of the URL becomes part of the breadcrumb trail.

Step 4:- Configure Easy Breadcrumb Module.

• Go to the Drupal admin menu.
• Go to Configuration.
• Under the user/interface section.
• Click Easy Breadcrumbs.

Step 5:- Then Configure the Easy Breadcrumbs settings..

• Delimiter : Set the delimiter for Breadcrumb segments (e.g., ‘>’ or ‘/’).
• Title : Choose whether to include the page title in the breadcrumb trail.
• Home Link : Optionally , include a ink to the home page.
• Content type : Select which content type should use Easy Breadcrumbs.

Step 6:- Save all the configuration of the Easy Breadcrumbs.

Step 7:- Create Menu links for Breadcrumbs then navigate to menus.

• Go to Structure -> Menus.
• Choose the menu where you want to add links(e.g., Main Navigation).
• Click Add link.
• Fill in the Menu link title, path, and other details.
• Click on Save.

Step 8:- Customize Breadcrumbs via the theme, Override Breadcrumbs template.

• Navigate to your theme directory: “themes/custom/your_theme/templates”.
• Copy the “breadcrumb.html.twig” template from the core or base theme to your theme directory.

Step 9:- Clear the cache to apply changes

• Go to the Drupal Admin menu.
• Then Go to Configuration -> Performance -> Clear all Cache.
• This ‘admin/config/development/performance’.

Step 10:- Test Breadcrumbs.

• Navigate Your sites – Browser through your site and check the Breadcrumb are displayed currently each on page.
• Verify the Breadcrumbs reflect the path and titles as expected.

Additional Things we can do for using the Breadcrumbs in our required Drupal.

• Breadcrumbs Blocks :- You can add a breadcrumb block to specify regions of your theme.
• Go to the Structure -> Block layout (“/admin/structure/block”).
• Find the Breadcrumb Block, placed it in the desired region.
• Permissions :- Ensure that appropriate permissions are set for viewing breadcrumbs.
• Go to the People -> Permissions.
• This ‘admin/people/permissions’.