Lexicon v1.0.32

Collapsible Search

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

<div class="collapse-basic-search" data-toggle="collapsible-search">
    <form class="basic-search input-group">
        <div class="input-group-input">
            <div class="basic-search-slider">
                <button class="basic-search-close btn btn-default" type="button">
                    <span aria-hidden="true" class="icon-remove"></span>
                </button>
                <input class="form-control" placeholder=" Search..." type="text" />
            </div>
        </div>
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit">
                <span aria-hidden="true" class="icon-search"></span>
            </button>
        </div>
    </form>
</div>

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.

Alternate Navbar Toggle Style

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.

<div></div>

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.

<div></div>