Drupal 8 Accessing Menu Tree in a Block's JS

Question

How can I pass the menu into a block's javascript?

I am trying to build a block for a custom mobile menu (client wants specific logic/animations/etc) and use that in Structure > Block layout > Main Navigation.

They want me to do it via jQuery for reasons, but I cannot find how to get access to the menu tree in the javascript of the block. I feel like this should be simple enough with the API but the documentation seems to be all focused on PHP.

Any help is appreciated, thanks!

NOTE

I did find this post but I'm honestly not sure what it is trying to do, it is from about 4 years ago, and making/bundling libraries to just access the menu seems like it is probably not the ideal way to do this. Also I am using Bootstrap's theme and I do not see a template.php. Thanks again!

Answer 1

The documentation is inevitably focused on PHP, since Drupal is written in PHP and server-side renders. And the answer to getting info from PHP/server side to JS/client side is not really Drupal specific. Like any other situation of this ilk in web development, you have two basic choices. Either annotate your HTML with enough elements, IDs and classes that you can pull the necessary info out of the DOM, or expose an endpoint containing the info in a convenient-for-JS-consumption format like JSON for your javascript to fetch.

As for the latter, if you don't feel like rolling your own endpoint, there seem to be one, two three and maybe more modules, although I cannot vouch for any of them.