The **JSMenu Compatible Component Selector** is a dialog in Servoy Developer that allows developers to assign menus to compatible components such as [Sidenav](/guides/develop/application-design/ui-components/navigation/sidenav.md#overview) or [Navbar](/guides/develop/application-design/ui-components/navigation/navbar.md#overview). It ensures compatibility and provides tools for easily searching, filtering, and selecting the appropriate components.
## Sections
### Search Field
The input field where you can type text to filter the list of compatible components. It dynamically updates the list based on the input.
### Component List
Displays components compatible with the JSMenu framework, such as `sidenav [servoyextra]` and `navbar [bootstrapextracomponents]`. Each entry shows the component name and its source.
### Filter Options
Clicking the three dots icon next to the search field reveals an additional option:
* **Filter on parent nodes** : Provides a toggle to filter on parent nodes or leaf nodes, useful for narrowing down results when working with nested or hierarchical menus.
### Action Buttons
* **OK**: Adds the selected component to the main form. Automatically will set the previously selected [Servoy Menu](/guides/develop/application-design/data-modeling/menu.md#overview) name for the `servoyMenu` property of the added component.
* **Cancel**: Closes the selector without applying changes.
## Using the JSMenu Compatible Component Selector
Create a Sidenav through a Servoy Menu
Here are the steps for using the **JSMenu Compatible Component Selector**:
1. Open the Selector:
* Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) of the form where you need to place the compatible component
* Find the desired Servoy Menu name in the *Servoy Menu* section in the components' palette
* Drag and drop the desired Servoy Menu name in the form
2. Search for a Component (Optional)
* Use the search field to filter the list of compatible components.
* Type part of the component name (e.g., `sidenav`) to narrow down the results.
3. Filter Nodes (Optional)
* Use the filter toggle menu (three vertical dots) to switch between filtering on parent nodes or leaf nodes.
* This can help when working with nested or hierarchical menus.
4. Select a Component
* From the filtered list, select the desired component (e.g., `sidenav [servoyextra]` or `navbar [bootstrapextracomponents]`).
5. Confirm Your Selection
* Click `OK` to add the selected component to the main form.
* The selected Servoy Menu name will automatically be set for the `servoyMenu` property of the added component.
6. Cancel if necessary
* Click `Cancel` to close the selector without making changes.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/jsmenu-compatible-component-selector.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.