Introduction to Drupal breadcrumbs

What is a breadcrumb?

A breadcrumb is a type of secondary navigation scheme that reveals the user's location in a website or web application. It's a navigational aid that helps users understand their current position within the site's hierarchy without checking the URL or using the back button.

Breadcrumbs typically appear as a horizontal row of links, starting from the home page and ending with the current page, each separated by a ">" symbol.

Here is an example of a breadcrumb:

In this example, “Home,” “Insights” and “Salsa at the GovCMS Mega Meetup 2023” are breadcrumbs. Instantly, users can see that they are on an Insights page.

Intuitively, clicking “Insights” should take the user to the Insights listings page, and clicking “Home” should take the user to the homepage.

What is the role of a breadcrumb?

The primary role of a breadcrumb is to enhance a website's navigability by providing a clear path back to previous pages. It allows users to keep track of their locations within complex websites and makes it easier to navigate to higher-level pages.

Breadcrumbs also help with user orientation, reducing the number of actions required to return to a previous state and contributing to a cleaner, more efficient user interface.

Additionally, breadcrumbs can contribute to better search engine optimisation (SEO) by enabling search engines to better understand your site's structure and providing another navigation option that can appear in search results.

Importance of custom breadcrumbs for user navigation

Breadcrumbs are important because they improve the user experience by making navigation more intuitive and efficient. They help users quickly understand the layout of a website, providing a clear path back to the starting or entry point. This is particularly beneficial on websites with multiple levels of content hierarchy, as it reduces the cognitive load on users.

By enhancing the navigability of a website and making it easier for users to understand where they are within the site's structure, breadcrumbs encourage users to explore the site further rather than leaving after viewing only one page.

This improved user experience can lead to increased engagement, as users are more likely to visit multiple pages when they can easily navigate back to previous sections or explore related areas of the site. Thus, effectively implemented breadcrumbs can contribute to lower bounce rates by fostering a more engaging and user-friendly environment.

Keep reading for tips on how to improve your breadcrumbs or use the form below to contact us — we’ll evaluate and optimise your Drupal website's breadcrumbs, for enhanced navigation and SEO.

Basic understanding of Drupal's breadcrumb system

Drupal's default breadcrumb system automatically generates a breadcrumb trail for pages based on the site's menu structure and the current page's position within that structure. This system aims to reflect the hierarchical relationship between the content and provide users with a clear path back to the home page or previous levels.

When a page is created in Drupal, it can be assigned to a menu, which determines its position in the site's hierarchy. Drupal uses this information to build the breadcrumb trail, starting from the home page and adding links to each parent item in the menu leading up to the current page. The breadcrumbs are dynamically generated based on the user's path or the content's structure, ensuring the breadcrumb trail is relevant and accurate.

However, the default system may not always meet all needs out of the box. It’s relatively basic and might not reflect complex relationships or custom content types without additional configuration or the use of modules to extend its functionality.

For more customised breadcrumb behaviour, site builders often use contributed modules or custom code to modify how breadcrumbs are generated, such as including categories, tags, or other criteria in the breadcrumb path.

Using the Drupal breadcrumb’s API

The Drupal Breadcrumbs API is a framework within Drupal that allows developers to alter or extend the way breadcrumbs are generated and displayed on a website. This API provides a set of tools and functions that developers can use to customise the breadcrumb trail according to their site's specific needs, beyond what the default breadcrumb system offers.

Using the Breadcrumbs API, developers can:

• Define custom breadcrumb builders: These are classes that implement the BreadcrumbBuilderInterface. Developers can use these classes to create complex logic that determines how breadcrumbs are generated for different types of content or pages on the site.

• Alter existing breadcrumbs: The API allows for alteration of breadcrumbs generated by core or contributed modules. Developers can modify the breadcrumb trail for specific conditions or content types, adding, removing, or rearranging breadcrumb links.

• Add contextual information: It's possible to include dynamic information in breadcrumbs, such as category names, views, contextual filters, language, etc.

When are custom breadcrumbs needed?

Creating custom breadcrumbs in Drupal is necessary when the default breadcrumb generation does not meet the specific navigational structure or user experience requirements of your site.

Here are several scenarios indicating the need for custom breadcrumbs:

• Complex content structures: If your site has a complex content structure that doesn't follow a simple hierarchical menu system, you may need custom breadcrumbs to accurately represent the content's location and relationship within the site.

• Dynamic content relations: For websites that use taxonomies, tags, or custom relationships between content types (e.g., nodes related by a field other than menu hierarchy), custom breadcrumbs can reflect these relationships better than the default system.

• User experience enhancements: To improve user navigation and site usability, especially on sites where content is deeply nested or categorised in non-linear ways, custom breadcrumbs can provide clearer paths for users.

• Multilingual sites: If your site supports multiple languages and you need breadcrumbs to adapt dynamically to the language of the content being viewed, custom solutions can ensure breadcrumbs are correctly translated and relevant to the content's language context.

• Search engine optimisation: For improving the SEO of your website, custom breadcrumbs can be structured to include important keywords and follow best practices for breadcrumb navigation, which might not be fully optimised with Drupal's default breadcrumbs.

• Theming and branding requirements: Customising breadcrumbs becomes necessary when your site's visual design or branding guidelines require a specific presentation or format for breadcrumbs that the default system cannot provide.

If you encounter any of these scenarios or find that the default breadcrumb trail does not align with your site's navigation design and user journey goals, it's likely time to consider creating custom breadcrumbs in Drupal. Custom solutions can offer the flexibility to tailor breadcrumb behaviour and appearance to better suit your site's and its users' needs.

6 Steps to create custom breadcrumbs in Drupal

Creating and implementing custom breadcrumbs in Drupal 10 involves several steps, including creating a custom module, implementing a breadcrumb builder and optionally altering existing breadcrumbs. This section will walk you through the process:

Step 1: Create a custom module

First, create a module folder. Inside your Drupal installation folder, navigate to /modules/custom directory (create it if it doesn't exist) and create a new folder for your module, e.g., custom_breadcrumbs.

Next, you need to create a couple of module files. Within this folder, create two files:

• custom_breadcrumbs.info.yml: This file declares your module to Drupal.

• custom_breadcrumbs.services.yml: This file will be used to register your breadcrumb builder service.

Then, you need to define the module. In the file custom_breadcrumbs.info.yml, add the following basic information:

name: Custom Breadcrumbs
type: module
description: Provides custom breadcrumbs for specific routes.
package: Custom
core_version_requirement: ^10

Next, declare services: In custom_breadcrumbs.services.yml, declare your breadcrumb builder service:

services:
 custom_breadcrumbs.breadcrumb_builder:
 class: Drupal\custom_breadcrumbs\CustomBreadcrumbBuilder
 arguments: ['@entity_type.manager', '@current_route_match']
 tags:
 - { name: breadcrumb_builder, priority: 100 }

Step 2: Implement a breadcrumb builder

Create a PHP class file: In your module directory, create a subdirectory called src. Inside src, create a file named CustomBreadcrumbBuilder.php.

Breadcrumb builder class: Edit CustomBreadcrumbBuilder.php to define your breadcrumb builder. Implement the BreadcrumbBuilderInterface and optionally extend BreadcrumbBuilderBase for convenience using the following code:

<?php
namespace Drupal\custom_breadcrumbs;
use Drupal\Core\Breadcrumb\Breadcrumb;
use Drupal\Core\Breadcrumb\BreadcrumbBuilderInterface;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Link;

class CustomBreadcrumbBuilder implements BreadcrumbBuilderInterface {

  /**
   * {@inheritdoc}
   */

  public function applies(RouteMatchInterface $route_match) {
    // Determine if this builder should be used for the current route.
    // Return TRUE if it applies, otherwise return FALSE.
   $parameters = $route_match->getParameters()->all();


//Now we are going to say, if the current page is a node of type “page”, then return TRUE
    if (!empty($parameters['node']) && is_object($parameters['node']) && $parameters['node']->getType() == 'page') {
     return TRUE;
    }
  }

  /**
   * {@inheritdoc}
   */

  public function build(RouteMatchInterface $route_match) {
    $breadcrumb = new Breadcrumb();
    $access = $this->accessManager->check($route_match, $this->currentUser, NULL, TRUE);
    $breadcrumb->addCacheableDependency($access);
    $breadcrumb->addCacheContexts(['url', 'route', 'url.path', 'languages']);

    $parameters = $route_match->getParameters()->all();
    $links = [];

    if (!empty($parameters['node']) && $parameters['node']->getType() == 'page') {

     $links[] = Link::fromTextAndUrl($this->t('My Pages'), Url::fromUri('internal:/my-custom-pages'));
    }

    $links[] = Link::createFromRoute(t('Home'), '<front>');

    return $breadcrumb->setLinks(array_reverse($links));
  }
}

Step 3: Implement logic in applies() and build()

• applies() method: Implement logic to determine if your breadcrumb builder should be used for the current route. In our example, we check if we are viewing a “Page” content type.

• build() method: Implement logic to build the breadcrumb trail. In our example, once we are on a “Page” content type, add a breadcrumb link “/my-custom-pages”. The assumption here is that you have the page “/my-custom-pages” created elsewhere (possibly from a View that shows a listing of Pages).

Step 4: Enable your custom module

• Go to the Extend section of your Drupal admin UI and enable your custom module, or use Drush command drush en custom_breadcrumbs.

Step 5: Test your breadcrumbs

• Navigate through your site to the pages affected by your custom breadcrumb logic. Ensure that the breadcrumbs appear as expected and reflect the custom logic you implemented.

Benefits of a custom breadcrumbs module for Drupal

To effectively tailor your website's navigation, especially when seeking detailed control over breadcrumbs for specific URLs, opting for a custom module is the optimal solution, as demonstrated earlier.

This approach not only grants unparalleled precision in defining navigational paths but also enhances site usability and SEO, ensuring a coherent journey across various content types.

By adopting a custom breadcrumbs module, you empower your Drupal site with the flexibility to accurately reflect its unique content structure and user navigation needs, resulting in a significantly improved user experience and site performance.

Design considerations for breadcrumbs

When addressing theming and design considerations for breadcrumbs in Drupal, you should consider the following key points:

• Consistency with site design: Breadcrumbs should seamlessly integrate with your site's overall design and theme. They should adopt the same colour schemes, typography, and spacing to ensure visual harmony and not appear as an afterthought.

• Visibility and accessibility: Breadcrumbs must be easily visible without overpowering the primary content. Consider font sizes, colours, and placement that enhance readability for all users, including those with accessibility needs.

• Responsive design: Ensure that breadcrumbs are responsive and adapt well to various screen sizes. On smaller screens, consider compact designs or truncation strategies to maintain usability without cluttering the interface.

• Separator styling: The choice of separator between breadcrumb items (e.g., slashes, greater than signs) should be visually distinct yet not distract from the breadcrumb links themselves. Choose a style that complements the site's aesthetic.

• Interactive elements: If breadcrumb items are interactive, clearly indicate this through visual cues. Hover effects, underlining, or colour changes can signal to users that these elements are clickable.

• Highlighting the current page: The current page in the breadcrumb trail should be clearly marked and differentiated from clickable links, often through styling such as bold text or a different colour, indicating that it is not a link.

• Minimalist approach: Adopt a minimalist approach to breadcrumb design, focusing on simplicity and functionality. Overly complex or decorative breadcrumbs can detract from the user experience and navigation efficiency.

• Testing across browsers: Test your breadcrumb design across different browsers and devices to ensure consistent appearance and functionality and address any compatibility issues that arise.

These considerations are essential for creating breadcrumbs that are not only functional but also an integral part of the site's design and user experience.

Theming your breadcrumbs in Drupal

When theming breadcrumbs in Drupal, overriding the relevant template file provides a straightforward method to customise their appearance and structure to better align with your site's design.

The template typically targeted for breadcrumbs is breadcrumb.html.twig. This template offers a flexible starting point for theming, allowing you to adjust the HTML structure, add classes for CSS styling, or integrate additional elements like icons.

To theme your breadcrumbs, you would first locate the breadcrumb.html.twig template within the core or your active theme's directory. If it's not present in your theme, you can copy this template from Drupal's core stable theme as a starting point.

Once copied into your theme, you can modify this template to change how breadcrumbs are rendered. This might involve adding new classes for styling, changing the markup to include additional elements like separators, or incorporating conditionals for specific styling on certain pages.

Remember to clear the cache after making changes to see your updates reflected on the site.

This approach ensures that your breadcrumbs not only follow the navigational logic defined by your custom module or Drupal's default settings but also visually complement the overall design of your site, enhancing both aesthetics and user experience.

Integrating breadcrumbs with Drupal menus

Integrating breadcrumbs with Drupal menus involves leveraging the site's menu structure to generate breadcrumb trails that reflect the navigation path of the current page within the menu hierarchy.

This method ensures that breadcrumbs directly correspond with the site's primary navigation system, providing users with a clear and intuitive way to understand their location on the site and navigate through it.

Menu Breadcrumb module

One of the easiest ways to integrate breadcrumbs with Drupal menus is by using the Menu Breadcrumb module. This contributed module allows you to set which menu will be used to generate breadcrumbs, making it a straightforward solution for sites relying heavily on their menu structure for navigation.

Ensure your site's menu structure is well-organised and reflects the desired path users want to follow. A coherent menu structure is crucial for this approach's effectiveness, as the breadcrumbs will directly mirror the hierarchy defined in the menus.

Dynamic breadcrumbs for content types

Customising breadcrumbs based on content types in Drupal involves creating logic that alters the breadcrumb trail depending on the type of content being viewed. This can enhance the user experience by providing more relevant navigational cues tailored to the context of each content type.

There are two main ways of achieving this.

Use the breadcrumb builder interface

Previously, we demonstrated how to implement the BreadcrumbBuilderInterface. Now we just extend on it:

• In the build() method of your breadcrumb builder, use the $route_match parameter to determine the content type of the current page.

• Based on the content type, construct a breadcrumb trail by adding links using $breadcrumb->addLink(). You might add specific links for certain content types or alter the trail to reflect the content's structure or hierarchy.

Use contributed modules

Explore contributed modules that offer breadcrumb customisation. Some modules allow for conditional logic based on content types, enabling you to define breadcrumb paths without writing custom code.

Menu Breadcrumb module —This module offers some flexibility for breadcrumb generation based on menu structures, which can indirectly relate to content types if your menu is organised in this manner.

Admittedly, the Drupal documentation is lacking in this area, but here are two links that provide the best summary comparisons of Drupal breadcrumb contributed modules.

Drupal 10 Breadcrumbs modules comparison

Drupal 7, 8, 9, 10 Breadcrumbs module comparison

Contextual breadcrumbs based on taxonomy or views

Customising breadcrumbs based on content taxonomy in Drupal involves creating logic within a custom module to adjust the breadcrumb trail according to the taxonomy terms associated with the content being viewed. This customisation enhances site navigation by providing users with a more relevant and contextual path back through content categories or taxonomy hierarchies.

Using the breadcrumb builder interface

We will extend the BreadcrumbBuilderInterface. This class will contain the logic to alter breadcrumbs based on taxonomy terms.

Key steps in your breadcrumb builder:

• Detect content type: First, check if the current page is displaying content (e.g., a Page) that has taxonomy terms associated with it. This can typically be done by accessing the node object and its fields in the build() method.

• Fetch taxonomy terms: Once you've determined the content has associated taxonomy terms, fetch these terms. You might need to handle content associated with multiple terms or hierarchical terms (terms with parents).

• Generate breadcrumb links: For each relevant taxonomy term, add a link to the breadcrumb. If the terms are hierarchical, you can build a trail that reflects this hierarchy. Use $breadcrumb->addLink() to add each term as a breadcrumb link, ensuring the trail reflects the taxonomy structure.

• Set cache metadata: Ensure that your breadcrumb builder correctly sets cache metadata to reflect the dependencies on the taxonomy terms. This is crucial for ensuring that breadcrumbs update correctly when taxonomy terms change.

Use hooks for additional customisations

For further refinements or to introduce specific conditions outside of what your breadcrumb builder handles, consider using hooks like hook_preprocess_breadcrumb(). This allows you to alter the breadcrumb variables before they are rendered to the template.

Theme and template overrides

Complement your backend logic with front-end adjustments as needed. This might involve overriding the breadcrumb.html.twig template to adjust the markup or presentation of your taxonomy-based breadcrumbs, aligning them with your site's design and theming standards.

Consider contributed modules

Before diving into custom development, review available contributed modules that might offer the necessary functionality. While specific modules for taxonomy-based breadcrumbs may vary in availability and compatibility with the latest Drupal versions, modules like Taxonomy Path Breadcrumb, Taxonomy Breadcrumb or Easy Breadcrumb could provide a starting point or inspiration for your custom solution.

Breadcrumbs and accessibility best practices

When implementing breadcrumbs on a website, considering accessibility best practices is crucial to ensure that all users, including those with disabilities, can navigate your site effectively. Here are some key considerations around breadcrumbs and accessibility:

• Use descriptive labels: Each breadcrumb link should have descriptive text that clearly indicates its destination. Avoid vague labels like "Click Here" or "Page" and instead use meaningful names that reflect the content of the pages.

• Implement ARIA labels: Use ARIA (Accessible Rich Internet Applications) roles and properties to enhance the accessibility of breadcrumbs. Specifically, add aria-label="breadcrumb" to the navigation element that wraps the breadcrumb links to inform assistive technologies that the list is a breadcrumb trail.

• Ensure keyboard navigability: All breadcrumb links should be easily navigable using a keyboard. This means they should be focusable and selectable using keyboard controls without requiring a mouse.

• Provide visual indicators: For users with visual impairments or cognitive disabilities, visual indicators (such as arrows or greater-than signs) between breadcrumb links can help distinguish them as separate navigation elements. Ensure these indicators are visually clear and also accessible to screen reader users.

• Maintain a logical order: The breadcrumb trail should reflect a logical navigation order, typically following the hierarchy from the home page to the current page. This predictable structure helps users understand their location within the site.

• Contrast and font size: Ensure that the breadcrumb links have sufficient contrast against their background to be easily readable by users with visual impairments. Additionally, consider allowing users to adjust the font size without breaking the breadcrumbs' layout.

• Skip to main content link: Include a "Skip to Main Content" link before the breadcrumb trail to allow users to bypass repetitive navigation links, including the breadcrumbs, if they are navigating through multiple pages of your site.

• Consistent design and placement: Keep the breadcrumb's design and placement consistent across all pages. Consistency helps users with cognitive disabilities and those using screen readers to predict where to find navigation cues.

• Minimise clutter: While providing navigational context is important, avoid overloading the breadcrumb trail with too many links. Keep it concise to prevent cognitive overload, particularly for users with cognitive or learning disabilities.

• Test with screen readers: Test your breadcrumbs with various screen readers and devices to ensure they are announced correctly and that the navigation order is logical and intuitive. This testing can help identify any issues that might hinder the navigability for screen reader users.

Tips for multilingual breadcrumbs in Drupal

Managing breadcrumbs in a multilingual site presents unique challenges, as it requires ensuring that the navigation is intuitive and relevant across different languages, adapting to cultural and linguistic contexts.

Here are strategies and tips for effectively managing breadcrumbs on a multilingual website.

Automate translation of breadcrumb titles

Use Drupal's multilingual capabilities to automatically translate breadcrumb titles based on the user's language preference. Ensure all static text in breadcrumbs, including titles and separators, is subject to translation.

Maintain consistent structure across languages

Keep the structure of the breadcrumb trail consistent across all languages. This consistency helps users understand the site's hierarchy and navigation logic, even when switching languages.

Use language-specific URLs

Implement language-specific URLs for each page. This not only improves SEO for multilingual content but also ensures that breadcrumbs reflect the correct path and language context, enhancing user orientation.

Adapt breadcrumb logic to cultural contexts

Consider cultural differences in content hierarchy and navigation when designing your breadcrumb logic. What makes sense in one language or culture may not be intuitive in another, so adjust your breadcrumb generation logic accordingly.

Ensure RTL support for relevant languages

For languages that are read from right to left (RTL), such as Arabic or Hebrew, ensure your breadcrumb design and layout adapt accordingly. This may involve reversing the order of breadcrumb items and adjusting CSS for proper display.

Use Drupal's language detection and selection features

Leverage Drupal's built-in language detection and selection features to dynamically display breadcrumbs in the user's preferred language, based on their settings or browser configuration.

Test with multilingual users

Conduct usability testing with speakers of your site's supported languages to ensure that the breadcrumbs are intuitive and the translations are accurate. Feedback from native speakers is invaluable in identifying potential issues.

Synchronise breadcrumb paths across languages

For content that exists in multiple languages, ensure that the breadcrumb path is synchronised across its translations. This means that navigating through the site in one language and switching to another should maintain the user's position in the site hierarchy.

Customise breadcrumbs for language-specific content

If certain content is only relevant to speakers of a particular language, customise the breadcrumb trail to reflect this. For example, adding an additional breadcrumb link to a language-specific landing page can help orient users.

SEO benefits of well-structured breadcrumbs

Using structured data for breadcrumbs is crucial in enhancing a website's SEO and providing a better user experience. Structured data, often in the form of schema markup, allows search engines to understand the content and context of your web pages more effectively. By implementing structured data for breadcrumbs, you make it easier for search engines to parse and display your website's navigational trail in the search results.

Links to relevant resources:

• Schema.org breadcrumbList: The official schema definition provides a detailed guide on how to structure your data.

• Google's breadcrumb structured data general guidelines: Essential reading for understanding how Google interprets breadcrumb structured data.

• Google's structured data testing tool: Use this tool to validate your structured data implementation.

SEO benefits:

• Improved visibility in search results: Breadcrumbs structured data can lead to rich snippets in search results, where the breadcrumb path is displayed beneath the page title. This makes your listing more attractive and informative, potentially increasing click-through rates.

• Enhanced user experience: Displaying breadcrumbs in search results helps users understand where the page sits within your site structure before they click through, providing a clearer expectation of the content they will find.

• Better site navigation for search engines: Structured data for breadcrumbs helps search engines understand your website's hierarchy and structure, contributing to more effective indexing and relevancy of search results.

Troubleshooting common breadcrumb issues in Drupal

Managing breadcrumbs in Drupal can sometimes lead to common issues, which can detract from the user experience if not addressed. Here are some of the most common issues around breadcrumbs in Drupal.

Inconsistent breadcrumb trails

Issue: Breadcrumbs do not consistently reflect the site's structure or the user's navigation path, leading to confusion.

Resolution: Use the Drupal Breadcrumbs API or contributed modules like Breadcrumb Builder to implement custom logic that accurately generates breadcrumb trails based on the site's structure or the user's navigation history.

Missing breadcrumbs on certain pages

Issue: Some pages, especially custom pages not part of the main menu structure, may not display breadcrumbs.

Resolution: Ensure that your breadcrumb logic accounts for all custom routes or content types. You can create custom breadcrumb builders that add breadcrumb trails to these pages, ensuring consistency across the site.

Breadcrumbs not reflecting content hierarchy

Issue: Breadcrumbs do not accurately represent the hierarchical relationship between pages, particularly for nested content types or taxonomy terms.

Resolution: Customise breadcrumb generation to include hierarchical data from content types or taxonomy terms. This might involve developing a custom breadcrumb service that fetches and displays the hierarchy based on the current content being viewed.

Breadcrumbs lack customisation and flexibility

Issue: The default breadcrumb system in Drupal might not offer the level of customisation needed for complex sites, such as including additional links or dynamic text.

Resolution: Leverage Drupal's Breadcrumbs API to create custom breadcrumb builders. This allows for including dynamic links, such as taxonomy terms, and the flexibility to alter breadcrumbs based on specific conditions or content attributes.

Breadcrumbs not being SEO optimised

Issue: Breadcrumb trails are not structured to maximise SEO benefits, potentially missing out on rich snippets in search results.

Resolution: Implement structured data (schema markup) for breadcrumbs using JSON-LD scripts in your theme's templates. This helps search engines understand and display the breadcrumb path in search results, enhancing visibility.

Breadcrumbs not accessible

Issue: Breadcrumbs may not be fully accessible to users with disabilities, failing to comply with accessibility standards.

Resolution: Ensure that breadcrumbs are implemented with accessibility in mind, using appropriate ARIA labels and roles. Test with screen readers and follow WCAG guidelines to ensure that breadcrumbs are navigable and understandable by all users.

Breadcrumbs displaying incorrect labels

Issue: Breadcrumbs might show incorrect or non-descriptive labels, especially with dynamically generated content or pages.

Resolution: Customise the breadcrumb titles by overriding the default behaviour either programmatically in a custom module or by using the Drupal UI to set meaningful and accurate titles for each breadcrumb segment.

Breadcrumbs showing the wrong page title

Issue: If your custom breadcrumb does not provide any cache context, then the wrong title will show on different pages, or you may see “Access Denied” as the page title.

Resolution: Add cache context tags to your custom breadcrumbs. This issue is documented here.

Extending breadcrumbs with contributed modules

Specific module compatibility with Drupal 10 might vary as the Drupal community continuously works on updating modules for the latest versions.

Below are some contributed modules known for enhancing breadcrumb functionality in Drupal, which are likely useful for Drupal 10, given their popularity and utility in previous versions.

It's advisable to check the Drupal.org project pages for the most current compatibility information. We have parenthesised the compatible Drupal versions below at the time of publishing this article.

Menu breadcrumb (D7, D8, D9, D10)

Menu Breadcrumb module allows site builders to create breadcrumbs directly from the site's menu structure, providing an intuitive way to generate breadcrumb trails based on the active menu trail.

Path breadcrumbs (D7)

Path breadcrumbs allows you to create custom breadcrumbs for any page using the site's paths. This allows for highly customised and conditional breadcrumb trails based on paths, including support for tokens.

Easy breadcrumb (D7, D9, D10)

Easy breadcrumb leverages the current URL (path alias) and the page title to automatically generate breadcrumb links. It's a plug-and-play module that works out of the box and offers customisation options.

Custom breadcrumbs (D7, D10)

Although more popular in earlier versions of Drupal, custom breadcrumbs allows administrators to define custom breadcrumb trails for any type of page, particularly useful for nodes, terms, and views with specific breadcrumb needs.

Route specific breadcrumb (D8, D9, D10)

This module enables site builders to customise breadcrumbs at the route level. With this module, you can specify breadcrumb trails for individual routes, offering precise control over the breadcrumb output on a per-route basis, which is particularly useful for single pages or custom paths that require specific breadcrumb structures.

Conclusion

In this article, we explored the significance and implementation of breadcrumbs in Drupal, emphasising their role in enhancing website navigation and user experience. We covered the basics of breadcrumbs, their importance for SEO, and detailed steps for creating custom breadcrumbs in Drupal 10, highlighting the necessity for precise navigation control in complex website structures.

We also touched on integrating structured data for SEO benefits, managing breadcrumbs in multilingual setups for inclusivity, and resolving common breadcrumb-related issues to ensure a seamless user journey.

We further examined contributed Drupal modules designed to extend breadcrumb functionality, offering tools for improved navigation customisation and user experience.

Through technical insights and practical solutions, the discussion underscored the critical role breadcrumbs play in web navigation, demonstrating how Drupal's flexibility and available resources can be leveraged to create effective, accessible, and SEO-friendly navigational paths that cater to both site requirements and user needs.

Recap and final thoughts

Breadcrumbs significantly enhance website navigation and user experience by providing clear, context-aware paths that improve site usability, SEO and accessibility.

Drupal website owners are encouraged to evaluate and enhance their breadcrumb trails, ensuring they offer intuitive navigation and positively impact SEO and user engagement.

Discover how Salsa Digital can customise, evaluate and optimise your Drupal website's breadcrumbs for enhanced navigation and SEO. Use the form below to contact us.