It’s based on EPS and uses the navigable pattern that is described in the cookbook section of the docs. In addition to that it uses a custom trigger to allow search functionality and custom options to allow the navigation shown on the second level to remain fixed whilst the other options scroll. You can also see in the demo above that there is an option to toggle a filter on the list.

Specifying your own trigger and option is done like this

The trigger is rendered without any surrounding markup.

The options are rendered inside the default unordered list tag but you have access to the markup that is used around each option.

Having access to the <li> tag is the difference between specifying a replacement options component and yielding.

When you use EPS in it’s block form, what you have in the block is rendered for each option with EPS handling the rendering of the surrounding <li> . Normally this is great, saves you some work and hides the complexity you don’t need to see. But sometimes you need access to modify the <li> tag it’s self, this is when you should opt for a custom options component.

Generally when overriding either of these areas some of the default behaviour is still required and additions are then made to it. To restore all the default behaviour you can simply find the trigger and options components inside the EPS source and extend yours from them. The original trigger and options templates can then be copied. EPS works across a number of browsers and devices, it also supports a lot of features. If you don’t need all of the features and functionality then just take what you need from the default implementation and apply it to the components you are using to override the default trigger and options.

The behaviour i added to the trigger in this example was to allow it to capture a search query. This state is only shown when the dropdown is open, if the dropdown is closed the selected item is displayed as per the standard trigger. I needed to make a slight adjustment over the standard trigger as the selected option has a parent so I want to show the parent and the option selected when the dropdown is closed. This is as simple as adding the clause to the components template highlighted below.