Search Bar

(12 submissions) | Feb 13, 2017

These search bar designs are crucial in websites with lots of content, just like ByPeople. Use this catalog to explore multiple choices for search integration.

  • A set of 7 snippets made in CSS showing different approaches of a search user interface. The snippets are really simple to implement, including demos to easily choose the one you like.

  • A simple concept that showcases an auto-filtering search bar, useful for providing fast navigation through large amounts of data. The design itself is quite simple, featuring a plain white bar that goes along the site and a dropdown that fills dynamically when typing in it. A bright, colorful background wraps up the styling.

  • A cool idea for a search box designed by Dribbble’s user Jamie Syke. It features a set of buttons in bright colors that allow you to select different types of media for the search in question. The PSD is attached so you can make any changes you desire. It is totally free to download.

  • A real estate property search widget that will allow users to narrow down results according to their necessities. It includes a text field, dropdowns, dual slider for price, etc. It has a rather simple, flat style that will fit most projects. You can always edit the included PSD file if you need to.

  • An elegant solution for adding collaborators for a project, search for people on the right section, and read more about them on the left. Everything is editable and has vector shapes, except for the lovely circle buttons and the search input up on the right.

  • A search element that has multiple search options, mainly for searching for pics or images, coming out of a tooltip or drop-down menu. This fully editable file created in Photoshop allows you to access any part of a website easily, and the way its arranged (vertically makes it easy to integrate into any layout). This was created by Niko Picard.

  • A search box with a tooltip. Unfortunately, it is not entirely pixel perfect, but still can be editable since it’s a PSD file. The tooltip includes a set of icons for photos, music, and videos, among other items; the search bar has a minimal style, with its submit button complemented with gradients and a flat style for the tooltip, making use of different colors.

  • A pop-up (or pop-down) that shows an example of the commands you can give via voice to search for things on your computer. It also shows a confirmation of the phrase you just said. There is an animation in the attachment on top of the editable PSD. The file includes a search bar within a frame, the label “search” and a mic icon. The tooltip and the box itself have gradients and shadows so its appearance get kind of realistic.

  • Here we can appreciate a very interesting sidebar widget with a reduced height. It reduces its height by hiding some less important options and using a draggable/clickable separator to hide or show options. It contains not only a search field but a dropdown, radio buttons, sliders and a search button. Its design is minimalistic and can be downloaded for free.

  • This search bar gives you some suggestions as you type. It includes two-design elements: the actual search bar and a tooltip with the suggestions. The idea for this element is that developers use it as inspiration to create a nice suggestions’ system that may help the user find what they are looking for easily. Its design style is minimal, using some gradients, shadows and transparencies.

  • An excellent search bar for a domain service in two colors. These bars have a minimal style achieved thanks to the gradients and shadows applied to most of the design elements like the logotype space, the “search for domain” space, the actual search, the domain level selector, the advance search option and the register option.

  • A PSD with minimal shapes for a radio or music app. It has a search bar which not only gives you suggestions, but it shows you images and can even play a song or sound. Every item displays a thumbnail image, a title with a description, a star rating system and the price. This is an incredible addition to any music or streaming service.

Leave a comment

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator