> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Detached mode

> Detached mode turns the drop-down display into a full screen, modal experience.

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

Autocomplete's detached mode aims at reproducing native experiences on the device you're using.
It doesn't display a native input with results in a drop-down menu,
but a search button with results in a modal.
This allows a more immersive experience where the full viewport is used to display results.

<img src="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/detached-mobile.jpg?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=2974d5d3fad3c54096cf6f59a6a9eab1" alt="Screenshot of a mobile search interface showing 'laptop' autocomplete suggestions and product results." width="1280" height="720" data-path="images/ui-libraries/autocomplete/detached-mobile.jpg" />

You can enable detached mode on small screens, on touch devices,
or always enable it, as seen on [DocSearch](https://docsearch.algolia.com).

## Detached full screen design

Autocomplete's default behavior enables detached mode when the screen is below 500 pixels wide.
You can customize this behavior with the [`detachedMediaQuery`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-detached-media-query) option.

## Detached modal design

Once you're in detached mode,
you can choose to enable the modal design,
which shows the website in the background covered by an overlay.
You can set when to enable this design with the `--aa-detached-modal-media-query` CSS variable,
which defaults to `(min-width: 500px)`.

<img src="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/detached-desktop.jpg?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=4cc6acdc420718b9f8ac291f0bae7ada" alt="Screenshot of a detached autocomplete drop-down menu showing 'laptop' search suggestions and product results." width="1280" height="720" data-path="images/ui-libraries/autocomplete/detached-desktop.jpg" />

## Manually control detached mode

* To always turn on detached mode, set `detachedMediaQuery: ''`.
* To always turn off detached mode, set `detachedMediaQuery: 'none'`.