Detached Mode
Detached Mode turns the dropdown display into a full screen, modal experience.
Draft
This page is a draft.
#
What is DetachedAutocomplete Detached aims at reproducing native experiences on the device you're using. It doesn't display a native input with results in a dropdown, but a search button with results in a modal. This allows a more immersive experience where the full viewport is used to display results.
![]() | ![]() |
---|---|
Regular | Detached |
You can enable Detached mode on small screens, on touch devices, or always enable it, as seen on DocSearch 3 and the Algolia Documentation Search.
#
Detached full screen designAutocomplete's default behavior enables Detached mode when the screen is below 500px wide. You can customize this behavior with the detachedMediaQuery
option.
#
Detached modal designOnce you're Detached, 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)
.
#
Always enable Detached ModeTo always enable Detached Mode, you can pass detachedMediaQuery: ''
.
#
Always disable Detached ModeTo always disable Detached Mode, you can pass detachedMediaQuery: 'none'
.