Skip to Content

Clay CSS v3.9.0

Collapsible Search

A jQuery plugin that opens and closes a search bar in mobile.

Data API:

Enable using data attributes with data-toggle="collapsible-search". This method uses event delegation on the document.

Javascript:

Enable using javascript with $('#myElement').collapsibleSearch();. This method attaches the event handler on the element specified.

Options:

The default breakpoint is 768px, but can be customized through the variable $.fn.collapsibleSearch.Constructor.BREAKPOINT.

There is also $.fn.collapsibleSearch.Constructor.TRANSITION_DURATION that sets the delay (in hundreths) before the class basic-search-transition is removed.

Changing the breakpoint requires changing the media queries for basic search in the navbar component.

Style navbar toggle like a navbar navigation item with navbar-toggle-page-name.

Use this pattern when you want the search bar to always be shown (in mobile and desktop).

.navbar-collapse needs to be declared before .navbar-header. It allows the search box to fill the remaining space in smaller spaces.

Use the navbar-no-collapse component to preserve desktop navbar styles in mobile. It's useful when there are only one or two links in the navbar; where collapsing doesn't make sense.