Members Navigation Menus

With the stable release of BP 1.7 came the introduction of a new means of rendering the members navigational elements.

Long discussed and requested had been the desire to have the menu navigation rendered as a true UL construct with sub menu items as correctly nested ul/li elements as this would allow for not only a far better semantic description of this aspect of nav links but allow for a far greater range of options and flexibility in being able to style them e.g as drop down or fly out sub menu items.

Historically BP rendered the navigational elements as two separate functions bp_get_displayed_user_nav() & bp_get_options_nav() for the child elements making things quite hard to style effectively.

Thanks to the work Paul Gibbs ( @DJPaul ) put in over the 1.7 release cycle we now have a solution and a new template function we can use to replace bp_get_displayed_user_nav() et al. without further ado we welcome to the mix in a fanfare of glory:

bp_nav_menu()

This one function now replaces the previous two to render a true navigational nested UL construct.

Using the function

Using this function really is pretty straightforward however there are a number of aspects that need to be considered and dealt with by the developer.

To use the function we would need to modify the markup in /members/single/home.php by finding this section:

<div class="item-list-tabs no-ajax" id="object-nav">
  <ul>
 
   <?php bp_get_displayed_user_nav(); ?>

   <?php do_action( 'bp_member_options_nav' ); ?>
   

  </ul>
</div>

and replacing it with:

<div class="item-list-tabs no-ajax" id="object-nav">
 

   <?php bp_nav_menu(); ?> 


</div>

In the individual template pages e.g /members/single/activity.php this function needs to be removed from the div#subnav:

<?php bp_get_options_nav(); ?>

Additional Considerations

The above examples are a guide and may need further refining, for instance now the top level parent div ‘#object-nav’ could be considered redundant and removed ( it’s left there in the example for the moment as it shouldn’t harm) The same can be said for the parent div ‘#subnav’.

In the #subnav we have filters on tabs such as ‘Activity’ these are essentially hardcoded select elements that reside in the now redundant ul wrapper in #subnav, in theory it ought to be safe to move this series of elements around as long as one pays attention to class/id tokens so as to not upset any Ajax/JS functionality ( in 1.7 we attempted to unchain JS functions from element selectors i.e ‘div’ to instead just hooking on the class or id token alone to allow for greater flexibility in marking up these sorts of elements.)

Styling: At present it is up to the developer implementing this new nav function to understand that they will need to build a series of rulesets to handle the hide /show of child nav items – the elements have all been given appropriate class tokens to aid this. In time and given time perhaps some generic snippets might be provided somewhere for people to download to give them a head start ( the experimental project managed by @DJPaul and @karmatosed ‘Turtleshell’ will probably incorporate this new function and basic styling)

Filters, Walkers, Args

The function has been fully scoped with filters, function args, and a walker function.

View the Changeset to see all that can be modified but briefly:

The function can take a series of arguments to modify aspects of the display such as parent elements or classes, this mirrors the functionality of the WP wp_nav_menu() so usage will be familiar to anyone :

$defaults = array( 
 	'after'           => '', 
 	'before'          => '', 
 	'container'       => 'div', 
 	'container_class' => '', 
 	'container_id'    => '', 
 	'depth'           => 0, 
 	'echo'            => true, 
 	'fallback_cb'     => false, 
 	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
 	'link_after'      => '', 
 	'link_before'     => '', 
 	'menu_class'      => 'menu', 
 	'menu_id'         => '', 
 	'walker'          => '', 
 	); 

There are a full range of filters provided so that you can do things like filter new li items as shown below:

$items = apply_filters( 'bp_nav_menu_items', $items, $args );

This is a brief glimpse of this new function but one that will see increasing usage and deserves a big thanks to DJPaul and the rest of the core lead development team for pulling this out of the hat.