---
title: "Search bar element on your site"
description: "Give your visitors a bar to search products, blog articles and pages from anywhere on your site."
url: https://docs.vivlab.com/en/editor/menu/searchbar
---

# Search bar

The **Search bar** element offers your visitors an area to search content on the site (products, blog articles, pages…).

<DocsScreenshot name="editor-search-placeholder" alt="Custom placeholder text for a search bar." :width="340" :height="77" />

## Search bar text

The only functional setting specific to this element is **Search bar text**: it's the placeholder text shown until a search has been typed (for example "Search for a product…").

## Style

The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [text style](https://docs.vivlab.com/en/editor/style/text.md), [background](https://docs.vivlab.com/en/editor/style/background.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [corner radius](https://docs.vivlab.com/en/editor/style/border-radius.md), [shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md), [inner margins](https://docs.vivlab.com/en/editor/style/padding.md), [vertical alignment](https://docs.vivlab.com/en/editor/style/align.md) and [transitions](https://docs.vivlab.com/en/editor/style/transition.md).