Modifying breadcrumbs

Hi all!

I am trying to modify breadcrumbs on a search results template, but somehow couldnt get the below to work. Am I getting the syntax wrong?

beans_remove_action( 'beans_breadcrumb_item[_active]' );

I've also tried the below to hide the active breadcumb item:

beans_add_attribute( 'beans_breadcrumb_item[_active]', 'class', 'hidden' );

Thank you very much in advance! 🙂

Hey Umut, do you just want to remove the breadcrumb? If yes, you can use beans_remove_action( 'beans_breadcrumb' );.

Hi Thierry - thanks for your reply.. I am looking to keep the breadcrumbs but remove only the "active" part of breadcrumb because I want to replace it with some other text 🙂

( the part with data-markup-id = beans_breadcrumb_item[_active] )

I see, there is not filter output for this one but I have made a note to add one in the next Beans update. In the mean time, you can hide it as such:

beans_add_attribute( 'beans_breadcrumb_item[_active]', 'class', 'uk-hidden' );

Thanks for you feedback,

This is perfect, thanks a lot, Thierry! 😉

I have been experiementing with breadcrumbs and here are some suggestions on modifications:

data-markup-id: beans_breadcrumb_item_link_inner
<!– open output: beans_breadcrumb_item_text –>
“Home”
<!– close output: beans_breadcrumb_item_text –>

// Modify the breadcrumbs non active link text. Could be home or anything else.
add_filter( 'beans_breadcrumb_item_text_output', 'modify_home_text' );
function modify_home_text() {
 return ‘Back’;
}

// Modify the breadcrumbs active link text.
add_filter( 'beans_breadcrumb_item[_active]_text_output', 'modify_active_text' );
function modify_active_text() {
 return 'The active page';
}

//   Remove breadcrumbs 
beans_remove_action( 'beans_breadcrumb' );

//  Remove the active link NB! Not working
beans_remove_action( 'beans_breadcrumb_item[_active]' );

// Add a new CSS class or use an existing ui-kit class.
beans_add_attribute( 'beans_breadcrumb_item', 'class', ‘breadcrumbs’ );

The CSS: 
.breadcrumbs {
  font-size: 16px !important;
}

// Add a new CSS class or use an existing ui-kit class.
beans_add_attribute( 'beans_breadcrumb_item[_active]', 'class', 'breadcrumbs-active' );

The CSS:
.breadcrumbs-active:before {
  content: "<--" !important;
}

Add a :before or :after. I added a :before that removed the default content “/“ and replaced it with a <—.

A big NB! As I did a copy and paste from text-edit the ' might be off. If your not getting it to work then manually change the ' and perhaps also the " . (As in the single quote and the doble quote marks.)

I want to follow-up here and add some context to the discussion about breadcrumbs and markup vs. action/filer API.

The reason why this code does work is:

beans_remove_action( 'beans_breadcrumb_item[_active]' );

'beans_breadcrumb_item[_active]' is a markup ID and not a hooked action callback. It's an ID to identify the active <li> item in the web page's HTML markup.

How to "hide" it

The following line of code hides the active <li> list item in the web page's HTML markup:

beans_add_attribute( 'beans_breadcrumb_item[_active]', 'class', 'uk-hidden' );

How? It's adding a class attribute of uk-hidden which then adds this CSS to the page:

.uk-hidden {
    display: none !important;
    visibility: hidden !important;
}

This is from UIKit. Notice that for that <li>, the display is set to none and the visibility is hidden. Visually it looks like it's not on the web page as the CSS is hiding it.

But it's still there in the HTML markup. That means those using a screen reader as well as bots (such as search engines) can still read it.

Here's an example of the actual HTML with this class attribute applied to it. What do you see?

<li class="uk-active uk-text-muted uk-hidden" data-markup-id="beans_breadcrumb_item[_active]">
  <!-- open output: beans_breadcrumb_item[_active]_text -->
    Beans Rocks!
    <!-- close output: beans_breadcrumb_item[_active]_text -->
</li>

It's still in the there.

How to Completely Remove From the HTML Markup

If your goal is to completely remove this component from the web page's HTML markup, then you can put the following line of code in your child theme:

beans_remove_markup( 'beans_breadcrumb_item[_active]' );

When the web page renders, the active <li> is not there.

How? With the above code, Beans strips it out, meaning that it never is sent out to (rendered) to the browser. Now we don't need CSS to visually hide it.