Tabs
Learn what tabs are and how to filter multiple tabs in the Novu Inbox component.
In the Inbox components, you can use Tabs to organize Inbox notifications into separate sections, creating a cleaner, more organized experience for your subscribers. Each tab displays a subset of in-app notifications based on defined rules, making it easier to surface important notifications.
Group notifications into tabs
Each tab is defined using the tabs
prop of the Inbox component. Every tab object includes the following properties:
label
: A string that defines the tab’s title, displayed as the visible label in the UIfilter
: An object that defines which notifications are included in a particular tab.
Using tags
Tags can be assigned to any workflow in the Novu workflow editor. These tags can then be used in the filter object to group notifications from one or more workflows under the same tab.
For example, assign a promotions tag to marketing workflows or security and alert tags to security workflows to group their notifications under dedicated tabs. To show all the notifications in a tab, pass an empty array to the tags property.
Using the data object
The data object can be included in every in-app notification in the in-app editor editor. This object holds custom key-value pairs, which you can use to filter notifications into specific tabs.
For example, use { priority: "high" }
to group all high-priority notifications under a dedicated "High Priority" tab.
Using tags and data object
You can combine tags and the data object in the same filter to create more specific tabs tailored to your use case.