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 
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.)

Edited 2 months, 2 weeks ago by Paal Joachim Romdahl

Write a reply

Login or register to write a reply, it's free!