---
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 `<div class="coveoSettings">` section, and then add the following code to the section:

```html
<div class="CoveoAdvancedSearch"></div>
```

The `<div class="coveo-search-section">` section should now look like this:

```html
<div class="coveo-search-section">
	<div class="CoveoSearchbox" data-enable-omnibox="true"></div>
	<div class="CoveoSettings">
		<div class="CoveoAdvancedSearch"></div>
	</div>
</div>
```

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.