Tabs

Tabs in the Novu Inbox enable you to organize and display different sets of notifications within distinct UI tabs. This creates a structured, filterable interface for end users to easily navigate their in-app notification feed.

Each tab is defined using the tabs prop of the <Inbox /> component. Every tab object include the following properties:

• label: A string representing the tab's visible title.
• filter: An object defining the filter criteria for notifications displayed in that tab.

The filter property supports two filtering options:

• Tags: Filter based on the tags assigned to a workflow in the workflow editor.
• Data attributes: Filter based on values in the notification payload (data).

Filter tabs by tags

Each notification is associated with a workflow, and workflows can be tagged in the workflow editor. These tags can then be used to group notifications from one or more workflows under a single tab by referencing shared tag names.

To use tags effectively in tab filters, assign clear and descriptive tags to your workflows in the workflow editor. For example, use tags like promotions to group marketing messages or security to collect alerts related to user safety.

import { Inbox } from '@novu/react';
 
export default function InboxWithFilters() {
 
  const tabs = [
    {
      label: 'All Notifications',
      filter: { tags: [] },
    },
    {
      label: 'Promotions',
      filter: { tags: ['promotions'] },
    },
    {
      label: 'Security Alerts',
      filter: { tags: ['security', 'alert'] }
    },
  ];
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      tabs={tabs}
    />
  );
}

Filter tabs by data attributes

Each notification can include a data payload that contains custom metadata such as priority, category, or activity type. This method is most useful when you want to segment notifications by metadata embedded in the payload rather than by workflow configuration. You can use these data attributes to group notifications under a single tab by filtering based on specific values in the payload.

To use data attributes effectively in tab filters, make sure your notification payloads are consistently structured and contain clearly defined fields. For example, you might include priority: "high" to identify urgent alerts or type: "login" to track user sign-ins.

The data object supports only scalar values, such as strings, numbers, booleans, or null. String values are limited to 256 characters.

import { Inbox } from '@novu/react';
 
export default function InboxWithFilters() {
 
  const tabs = [
    {
      label: 'High Priority',
      filter: {
        data: { priority: 'high' },
      },
    },
    {
      label: 'User Activity',
      filter: {
        data: { type: 'login' },
      },
    },
  ];
  
 
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      tabs={tabs}
    />
  );
}

Combining tags and data

You can also combine both tags and data in a single filter to create highly specific tabs tailored to your use case.

import { Inbox } from '@novu/react';
 
export default function InboxWithFilters() {
 
  const tabs = [
    {
      label: 'High Priority',
      filter: { 
        tags: ['alert'], // [\!code highlight]
        data: { priority: 'high' } // [\!code highlight]
      },
    },
  ];
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      tabs={tabs}
    />
  );
}