Expanding search bar

Written byPhuoc Nguyen

Created

29 Sep, 2022

We often use this animation to expand a search bar when users click its search icon.

#Layout

Let's take a look at the layout of the search box that consists of text input and a search button.

html

<div class="search">
    <!-- The input element -->
    <input type="text" class="search__input" placeholder="Search" />

    <!-- The search button -->
    <button class="search__button">
        <svg class="search__icon">...</svg>
    </button>
</div>

These elements are displayed at the center in both vertical and horizontal directions, hence we can use the `flexbox` style for the search bar:

css

.search {
    align-items: center;
    display: flex;
    justify-content: center;
}

The same styles are applied to the button to center the search icon:

css

.search__button {
    align-items: center;
    display: flex;
    justify-content: center;
}

#Animation

Initially, we can set a zero width for the text input to make it hidden:

css

.search__input {
    width: 0;
}

In order to animate the input when it is expanded, we simply add a transition for the `width` property:

css

.search__input {
    transition: width 120ms;
}

.search--expanded .search__input {
    width: 10rem;
}

When users click the search button, we will toggle the expanded class for the whole search bar. The following piece of code assumes that the `searchButton` and `searchBar` variables represent the search button and search bar elements, respectively.

searchButton.addEventListener('click', () => {
    searchBar.classList.toggle('search--expanded');
});

To improve the user experience, you should focus on the input automatically:

searchButton.addEventListener('click', () => {
    const isExpanded = searchBar.classList.contains('search--expanded');
    if (!isExpanded) {
        inputEle.focus();
    }

    ...
});

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Expanding search bar

#Layout

#Animation

Questions? 🙋

Recent posts ⚡

Newsletter 🔔