Configuring Multiple Tabs

Novu enables the creation of a multi-tab experience for the Inbox, allowing you to filter and display notification lists within distinct UI tabs.

Defining tabs

Define the tabs prop to display multiple tabs in the Inbox component.

Each tab object should include a label and filter properties. The label property represents the text displayed on the specific tab. The filter property is an object that serves as the “filter criteria” for the notifications displayed in the list. The filter should include the tags which is an array of strings.

The notifications are filtered and matched by comparing the workflow tags field with the tab filter.tags array. Each notification is a part of a specific workflow. You can combine tags from different workflows to create a customized tab experience.

The example below demonstrates how to define multiple tabs in the Inbox component.

import { Inbox } from '@novu/react';

const tabs = [
  {
    label: 'All Notifications',
    filter: { tags: [] },
  },
  {
    label: 'Newsletter',
    filter: { tags: ['newsletter'] },
  },
  {
    label: 'React',
    filter: { tags: ['react'] },
  },
];

function InboxNovu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      tabs={tabs}
    />
  );
}

Multiple Tabs in Inbox

Here tab filter.tags are taken from workflow tags. Tags can be configured in options field of workflow.