# ServoyMenu Selection Wizard

## Overview

<div align="center"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-3a4d19d8a1b924551a80bb276399fd8409cc773e%2Fmenu-selector-wizard.jpg?alt=media" alt=""><figcaption><p>Menu Selection Wizard</p></figcaption></figure></div>

The **Menu Selection Wizard** allows developers to assign an existing Servoy Menu to compatible components like [Sidenav](https://docs.servoy.com/guides/develop/application-design/ui-components/navigation/sidenav#overview) or [Navbar](https://docs.servoy.com/guides/develop/application-design/ui-components/navigation/navbar#overview). This wizard ensures that only predefined menus are available for selection, streamlining the process of linking menus to components.

## Sections

### Search Field

The input field where you can type text to filter the list of available Servoy Menus, making it easier to locate menus in projects with multiple menu configurations. It dynamically updates the list based on the input.

### Menu List

Displays the list of available [Servoy Menus](https://docs.servoy.com/guides/develop/application-design/data-modeling/menu#overview) along with the default `-none-` option.\
Selecting `-none-` removes any assigned menu from the component.

### Action Buttons

* **OK**: Assigns the selected [Servoy Menu](https://docs.servoy.com/guides/develop/application-design/data-modeling/menu#overview) to the component.
* **Cancel**: Closes the wizard without making changes.

## Using the Menu Selection Wizard

<div align="center"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-699d0e306f951f67b1adfea526ab4aede1b9b8df%2Fservoy-menu-assign-to-component.gif?alt=media" alt=""><figcaption><p>Example: assign a Servoy Menu to a Navbar component</p></figcaption></figure></div>

Here are the steps for using the **JSMenu Compatible Component Selector**:

1. Access the Wizard:
   * Open the properties panel of a compatible component, such as [Sidenav](https://docs.servoy.com/guides/develop/application-design/ui-components/navigation/sidenav#overview) or [Navbar](https://docs.servoy.com/guides/develop/application-design/ui-components/navigation/navbar#overview).
   * Locate the `servoyMenu` property and doulbe click the its value to open the **Menu Selection Wizard**.
2. Search for a Menu (Optional)
   * Type the menu name (or part of it) in the search field to filter the available Servoy Menus.
3. Select a Menu
   * Click on the desired [Servoy Menu](https://docs.servoy.com/guides/develop/application-design/data-modeling/menu#overview) from the list.
   * If you want to remove any menu assignment, select `-none-`.
4. Confirm the Selection
   * Click `OK` to assign the selected menu to the `servoyMenu` property of the component.
5. Cancel if necessary
   * Click `Cancel` to close the wizard without applying any changes.