Custom Text for Drilldown Menu "Back" Button [Foundation 6]

Question

While I know I can use data-back-button to change the text on my drilldown menus, is it possible to change them to reflect whatever the parents of the drilldown is?

For example, the drilldown menu works as such:

And I'd like it to function as such:

I hope this makes sense and let me know if I can clarify. Thanks for any insight you can provide.

Answer 1

There are a couple of ways you could do this but the most straightforward seems to me to be something like this:

1) Use Foundations Drilldown options to set a new general back button. e.g. data-back-button='<li class="js-drilldown-back"><a class="new-back"></a></li>'

This takes care of the styling with .js-drilldown-back and makes it work as a back button without additional JavaScript. It also adds a new class to the a for later use setting the text.

2) To change the text you can use jQuery, perhaps something like this:

$('.new-back').each(function(){
  var backTxt = $(this).parent().closest('.is-drilldown-submenu-parent').find('> a').text();
  $(this).text(backTxt);
});

All this does is scurry up the menu structure to find out what the original link text was, and then copies it to the new back button.

This should work for all levels of a drilldown as in this example: http://codepen.io/tymothytym/pen/GWbXap

FYI: There are a few mild usability concerns with using the same labels to point forward and backwards in menus as users can find this confusing, particularly with many levels. You may have already considered this, I mention it only for completeness.