How to Truncate Long Breadcrumb Titles in Drupal for Better Accessibility

Staff Reporter

Joan Català addresses a UI accessibility issue in Drupal where breadcrumb trails become unreadable due to long node titles. When breadcrumbs wrap to multiple lines, they clutter the page and disrupt navigation clarity.

Joan's proposed fix is simple: truncate the node title in the breadcrumb to 28 characters, appending an ellipsis. This is done by modifying breadcrumb.html.twig to check the string length and slice it accordingly. A final drush cr clears the cache to apply the change.

This snippet improves usability without affecting content or SEO. It’s a practical tip for multilingual or verbose content sites where long titles are common. Though minor, the adjustment enhances frontend accessibility and overall design polish.

Source Reference

Title

Shortening the Number of Characters of the Ariadne Thread in Nodes With a Long Title

Byline

Joan Catala

Date of Publication

16 June 2025

Accessibility

Twig

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.