Skip to main content
In Courier Inbox, tabs are the primary way to organize and filter in-app notifications.
Preview of CourierInbox with tabs
A tab is a filtered view of notifications. Tabs apply a filter object to determine which notifications appear in the list. Each tab can filter notifications using a filter object. You can use one or more of the following filters:
  • tags to show specific notification types. These are defined by you.
  • status to filter by read/unread
  • archived to include archived notifications
  • A feed is a top-level container in the inbox header that groups related tabs together.
Most apps only need one feed (so the feed selector is hidden), but you can define multiple feeds if you want separate top-level categories of notifications. You can learn more about tabs and feeds in our Inbox documentation.

​
Example

Define tabs inside a feeds array. Each tab has a datasetId (unique identifier), title (display name), and filter object. 
<CourierInbox
  feeds={[
    {
      feedId: "notifications",
      title: "Notifications",
      tabs: [
        { datasetId: "all", title: "All", filter: {} },
        { datasetId: "unread", title: "Unread", filter: { status: "unread" } },
        { datasetId: "orders", title: "Orders", filter: { tags: ["order"] } },
        { datasetId: "alerts", title: "Alerts", filter: { tags: ["alert"] } },
      ],
    },
  ]}
/>
Tags are set when you send a message using metadata.tags: 
{
  "message": {
    "to": { "user_id": "user_123" },
    "template": "order-shipped",
    "metadata": {
      "tags": ["order"]
    }
  }
}

Get Started with Inbox

Set up Courier Inbox in your app

React SDK

Full tabs and feeds reference for React