--- title: Advanced Search component slug: '3213' canonical_url: https://docs.coveo.com/en/3213/ collection: javascript-search-framework source_format: adoc --- # Advanced Search component The [`AdvancedSearch`](https://coveo.github.io/search-ui/components/advancedsearch.html) component can be useful for users that want to build and tune complex [queries](https://docs.coveo.com/en/231/) without using the [Coveo query syntax](https://docs.coveo.com/en/181/). The [`AdvancedSearch`](https://coveo.github.io/search-ui/components/advancedsearch.html) component appears as an option in the [**Settings** menu](https://docs.coveo.com/en/1644/) ![Settings](https://docs.coveo.com/en/assets/images/coveo-platform/icon-settings.png) when a [`Settings`](https://coveo.github.io/search-ui/components/settings.html) component is initialized. ## Adding the Advanced Search component to a search interface Find the `
` section, and then add the following code to the section: ```html
``` The `
` section should now look like this: ```html
``` By clicking ![Settings](https://docs.coveo.com/en/assets/images/coveo-platform/icon-settings.png), your end users can now click **Advanced Search** and use the **Advanced Search** panel.