Styling Navigation Menu as breadcrumbs

Resolved

Requested: 3 years and 4 months ago

Is there a way to use or style a sidebar navigation menu widget as breadcrumbs?

I’d like to be able to just build my navigation and set the hierarchy with “Appearance > Menus” rather than relying on our SEO plugin (SEO Press Pro) and having to manually set parent/child relationships on every single page.

Any ideas would be most appreciated!

OnPoint Plugins

3 years and 4 months ago

Hi Les,

Certainly, you may style your widget to match the site’s breadcrumbs using the following custom CSS.

.advanced-sidebar-menu .child-sidebar-menu::before { content: ' » '; } .advanced-sidebar-menu .child-sidebar-menu { margin-left: 0; } .advanced-sidebar-menu li { margin: 0; display: inline; } .advanced-sidebar-menu li::after { content: ' » '; } .advanced-sidebar-menu li:last-child::after { display: none }

Have a great day!
Les Lee

3 years and 4 months ago

Thank you so much for the styles, that is very helpful indeed and gets me part of the way there.

What settings would I need to use on the widget itself to show:

“Home » Parent Page » Current Page Only”
OnPoint Plugins

3 years and 4 months ago
Hi Les,

If you add the following filters to your active theme’s functions.php file, the menu will only display:
1. The current page.
2. The current page’s direct parent.
3. A link to the “Home” page.
add_action( 'advanced-sidebar-menu/menus/navigation/objects/parse-hierarchy', function ( array $hierarchy, $current, $objects ) { if ( ! $current ) { $objects->menu_items = []; return; } $allowed = [ $current->get_id(), $current->get_parent()->get_id(), ]; foreach ( $objects->menu_items as $menu_item ) { if ( ! in_array( $menu_item->get_id(), $allowed, true ) ) { unset( $objects->menu_items[ $menu_item->get_id() ] ); } } }, 10, 3 ); add_filter( 'advanced-sidebar-menu/menus/navigation/get-nav-menu-args', function ( $args ) { $args['items_wrap'] = '<ul id="%1$s" class="%2$s" data-level="0"><li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children has_children"><a href="/">Home<ul class="child-sidebar-menu">%3$s</ul></li></ul>'; return $args; } );

Have a great night!
Les Lee

3 years and 4 months ago

That code works brilliantly! Thank you.

One last related, request: Since the site we’re working on goes pretty deep, is there a way to have 3rd, 4th, 5th, etc. levels show in the “breadcrumb” string?

e.g. “Home » Parent Page » Parent Page » Parent Page (etc.) » Current Page”

Thank you so much for the excellent help!
Les Lee

3 years and 4 months ago

Actually looks like when I go to the a second level item (e.g. About) I’m getting an error.

https://edot.mysites.io/about/

https://prnt.sc/1mhgyo9
OnPoint Plugins

3 years and 4 months ago

Hi Les,

I have adjusted the filters to support an unlimited number of parents above the current page.

add_action( 'advanced-sidebar-menu/menus/navigation/objects/parse-hierarchy', function ( array $hierarchy, $current, $objects ) { if ( ! $current ) { return; } $allowed = [ $current->get_id(), ]; while ( $current->get_parent() ) { $allowed[] = $current->get_parent()->get_id(); $current = $current->get_parent(); } foreach ( $objects->menu_items as $menu_item ) { if ( ! in_array( $menu_item->get_id(), $allowed, true ) ) { unset( $objects->menu_items[ $menu_item->get_id() ] ); } } }, 10, 3 ); add_filter( 'advanced-sidebar-menu/menus/navigation/get-nav-menu-args', function ( $args ) { $args['items_wrap'] = '<ul id="%1$s" class="%2$s" data-level="0"><li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children has_children"><a href="/">Home<ul class="child-sidebar-menu">%3$s</ul></li></ul>'; return $args; } );

I also wanted to mention to be sure to have “Display the current item’s section only” checked if you don’t want the widget to show up on pages which are not included in the menu.

Have a great night!
Les Lee

3 years and 4 months ago

This is excellent and most appreciated!

Thank you so much for the action and filter code. And thanks for the tip on the setting as well.

Have a great rest of your week!

New Response Cancel reply

You must be logged in to respond. Only PRO members are allowed to respond to support requests.