Collapsible search

Collapsible search provides a solution for the search text field in mobile resolution as the viewport size is reduced.

Usage

search collapse image with desktop and mobile examples

The search text field is reduced to just a button icon with the magnifying lense. When the button is tapped the field appears hovering the rest of the elements in the bar. Once the search action is performed the field gets to its initial state.

This pattern is commonly used when a search text filed placed in a bar gets to a mobile resolution. It can be the case of a navbar, or a management bar.

The following animation shows this pattern works:

collapse search animation in mobile to show a use case

Menu