# Header Widgets
## Overview
| Name | Element Name | Badge |
| ------------- | ---------------------- | ----- |
| Notifications | widget\_notifications | Yes |
| Search | widget\_search | No |
| Shopping Cart | widget\_shopping\_cart | Yes |
| Messages | widget\_messages | Yes |
There are currently four header widgets for Search, Shopping Cart, Messages, and Notifications that can be used and customized. All of these widgets (except the search) have the ability to display a numeric badge as shown below
### Show widgets in the header
These widgets are already preconfigured in the Canvas header. You can set these up using an action when adding icons to any header. [See how to do that here.](https://docs.airdev.co/canvas/3.7/canvas-functionality/reference/header#icons)
### Setting up the badge
To set up the badge value, open one of the widgets listed above that has the option of a badge. For example, if open the widget\_messages element in the Bubble editor, we can see a 'var-unread messages count' element in the elements tree that has a Data source value of 4.
To make this number dynamically represent a number of things for the current user, we want to change the date source value to be a dynamic expression with a search that finds all the things that apply to this user and then get the count.
## Specific element details
### Notifications
**Element name:** widget\_notifications\
**Purpose:** Display notifications to your users
This element contains a simple user interface for displaying unread messages or notifications. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Messages or Notifications).
Add workflows to `Button Mark as read`, `Group Select message`, and `Group view more`.
### Search
**Element name:** widget\_search\
**Purpose:** Provide a convenient location for your users to search and view results
This focus group reusable element contains a simple user interface for searching for things. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Files or products).
Add workflows to `Group Select item` and update data source of `RepeatingGroup Dummy`.
### Shopping Cart
**Element name:** widget\_shopping\_cart\
**Purpose:** Display the items in the user's cart for easy review and checkout
This focus group reusable element contains a simple user interface for reviewing the items in your cart. To use this UI, please replace all dummy data type with the data type you want to display (e.g., Product or Cart items).
Add workflows to `Button remove`and `Button CHECKOUT`.
### Messages
**Element name:** widget\_messages\
**Purpose:** Display a list of unread messages for the user
