# Header Widgets

## Overview

**Element name:** widget\_icon\_actions

<table data-header-hidden><thead><tr><th>Name</th><th width="368.3333333333333">Element Name</th><th>Badge</th></tr></thead><tbody><tr><td>Name</td><td>Purpose</td><td>Badge</td></tr><tr><td>Notifications</td><td>Shows a list of app notifications</td><td>Yes</td></tr><tr><td>Search</td><td>Shows a global search input and dropdown</td><td>No</td></tr><tr><td>Shopping Cart</td><td>Shows a list of items in shopping cart</td><td>Yes</td></tr><tr><td>Messages</td><td>Shows a list of messages</td><td>Yes</td></tr></tbody></table>

![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/AQo9vLPWHiTOsz1gPVxH/CleanShot%202021-10-06%20at%2016.24.08.png)

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/6.0/canvas-functionality/reference/header#icons)

### Setting up the badge

To set up the badge value, open the **widget\_icon\_actions** reusable element and find a group called **var - item count/unread**. Go to the conditional tab to see placeholder conditional statements.

For example, if you want to display the unread messages count for a user, you'd need to update the conditional statement for 'Open messages widget' to a dynamic value that represents a number of things for the current user.

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/3TvzDHHonmHepxwVQq3P/messages.png" alt="" width="333"><figcaption></figcaption></figure>

## Specific element details

### Notifications&#x20;

**Group name:** Group 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&#x20;

**Group name:** Group 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 text`.

### Shopping Cart&#x20;

**Group name:** Group 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

**Group name:** Group Messages\
**Purpose:** Display a list of unread messages for the user

To use this UI, please replace all dummy data type with the data type you want to display (e.g., messages).

Add workflows to `Group view more` and `Button Mark as read`.