Back to Community

Resolving HTML and Special Character Issues in Breadcrumb NavXT Titles

32 threads Sep 9, 2025 PluginBreadcrumb navxt

Content

Many users of the Breadcrumb NavXT plugin encounter issues where HTML tags or special characters appear incorrectly in their breadcrumb trails. This guide explains why this happens and provides the most effective solutions to clean up your breadcrumb titles.

Why This Happens

Breadcrumb NavXT offers different template tags to handle titles. The primary issue arises from the difference between these tags:

  • %htitle%: Outputs the title with HTML formatting preserved.
  • %title%: Outputs the title with HTML tags stripped out.
  • %ftitle%: A less common tag that avoids the trimming function and can sometimes handle HTML entities differently.

When your post or page titles contain HTML (like <br>, <em>, or <strong> tags) or special characters (like apostrophes, ampersands &, or the ® symbol), choosing the wrong tag can lead to these elements displaying as raw code or being converted into HTML entities (e.g., &lt;em&gt;).

How to Fix It: Choose the Right Template Tag

The most straightforward solution is to change the template tag used in your breadcrumb settings.

Solution 1: Strip All HTML (Recommended for Clean Breadcrumbs)

  1. Navigate to Settings > Breadcrumb NavXT in your WordPress dashboard.
  2. Locate the various breadcrumb templates (e.g., Home, Post, Page, Archive templates).
  3. In each template, find every instance of %htitle% and replace it with %title%.
  4. Save your changes.

This change will remove all HTML tags from your breadcrumb titles, ensuring they display as plain text on the front end. This is the recommended approach for most users who want a clean, simple breadcrumb trail without any embedded formatting.

Solution 2: Use a Filter for Advanced Control

If you need more granular control—for example, to remove only specific HTML tags while keeping others—you can use the bcn_breadcrumb_title filter. This requires adding a small code snippet to your theme's functions.php file.

Example: The following code uses the PHP strip_tags() function to remove all HTML tags from the breadcrumb title.

function my_breadcrumb_title_filter($title) {
    return strip_tags($title);
}
add_filter('bcn_breadcrumb_title', 'my_breadcrumb_title_filter');

You can modify the strip_tags() function to allow certain tags if absolutely necessary, but this is generally not recommended for breadcrumbs.

Troubleshooting Other Related Issues

  • Apostrophes Showing with Slashes: This is often caused by using a straight tick (') instead of a proper apostrophe (’). Try using the HTML entity &#8217; in your title fields.
  • Special Characters Like & or ®: If these characters are being cut off or displayed incorrectly when title trimming is enabled, it may be due to a known issue with how HTML entities are handled. A potential workaround is to use the %ftitle% tag, which bypasses the trim function. The Breadcrumb NavXT team has acknowledged this issue and may address it in a future update.
  • RTL Text Direction: If you need right-to-left text alignment in your breadcrumbs, ensure you are using a <span> element with inline CSS for styling (direction: rtl;) instead of a heading tag like <h1>.

Important Note on Heading Tags

As of Breadcrumb NavXT version 4.3, heading tags (like <h1>, <h2>) are no longer allowed within the breadcrumb templates for semantic reasons. Breadcrumbs are considered a navigation aid, not a primary page heading. If you were previously using an <h1> tag in a template, you will need to remove it. Your theme should be responsible for providing the main heading for the page content.

By understanding the difference between the %htitle% and %title% tags, you can effectively control how your breadcrumbs are displayed and ensure a clean, professional-looking trail for your users.

Related Support Threads Support