---
title: Add the Settings component to a search interface
slug: '1644'
canonical_url: https://docs.coveo.com/en/1644/
collection: javascript-search-framework
source_format: adoc
---
# Add the Settings component to a search interface
[.halfWidthFloatRight.bordered.zoom]


The [`Settings`](https://coveo.github.io/search-ui/components/settings.html) component renders a **Settings** icon ![Settings](https://docs.coveo.com/en/assets/images/coveo-platform/icon-settings.png).
End users can click this icon to access a popup menu from which it's possible to perform several contextual actions.
The **Settings** icon typically appears at the right of the [`Searchbox`](https://coveo.github.io/search-ui/components/searchbox.html).

The **Settings** component can reference several components to populate its popup menu:

* [Advanced Search](https://docs.coveo.com/en/3213/) component
* [Export to Excel](https://docs.coveo.com/en/3214/) component
* [Preferences Panel](https://docs.coveo.com/en/3215/) component
* [Share Query](https://docs.coveo.com/en/3216/) component


> **Note**
>
> You can also add the [`SearchAlerts`](https://coveo.github.io/search-ui/components/searchalerts.html) component if your [search interface](https://docs.coveo.com/en/2741/) meets certain requirements.

To add the Settings component to a search interface

Find the `<div class="coveo-search-section">` section, and then add the following code to the section:

```html
<div class="CoveoSettings"></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>
</div>
```