Filter Navigation Menu

[jimgilliam]

How can I modify a second Flare search bar for a side nav menu and have it automatically filter the menu items as the user types? YouTube has an example here on the left menu: https://developers.google.com/youtube/v3/code_samples

Jim

[NorthEast]

There's nothing built in to Flare that will do that, so you'd have to add it yourself.

Now, say you added a script that could filter the menu (there are loads of examples of how to filter HTML), the next problem is that it might not work very well with the Side Nav menu.

The whole Side Nav menu is not loaded in the page initially, it'll only load the items you can actually see first. Then as you open up parts of the menu, it'll load the new items that become visible.

So searching/filtering the visible items in the Side Nav menu may not be that useful, as you probably want to find the child items that are not visible.

Therefore you may want to look at building your own navigation menu. If you use a menu proxy, that will generate a full menu with all the TOC items. It is a flat list though, so you'll need to add the code that displays it as an accordion menu (to expand/collapse sections), and also add the code to filter the menu.

It's a while since I looked at third-party menu components, but I know there a quite a few out there. Before MadCap added the Side Nav skin, I built my own accordion menu, by generating a menu proxy and then applying the Smartmenus menu control. Not suggesting you use that menu control in particular, although I see now that it does have a filter (https://www.smartmenus.org/about/themes/).

Anyway, I'd only suggest this route if you're keen and able to do it yourself.

[jimgilliam]

Thanks, NorthEast! As always, your advice is very valuable. I've seen React components that also might help with this. I'll investigate more.

Thanks!