# Search Bar Page

## Overview

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FlrQvPHlvNxSNzpzPeWbJ%2F48.png?alt=media\&token=d01890f5-c044-4280-9557-bc7b46a2efb5)

Responsive layout for a generic search page with a search bar at the top. Includes common filter options in a focus group. No workflows are associated with this block.

## Structure

* When this page is added to your app, it will come with two main groups:
  * **Blocks container 860 (do not rename)**\
    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
    * This group contains a group called **Group Main search and filters**. For more information on how to customize the search bar, please [click here](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/modules/single-input-search-bar-and-filter-group).
* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
    * **var - page tab**\
      This group stores the name of the tab (of type `text`) that the user is currently viewing. 
* This page will come with one reusable element: 
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters)

## How to set up

* For more information on how to customize the search bar, please [click here](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/pages/search-bar-page)