> ## Documentation Index
> Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring Multiple Tabs

Novu allows to create a multi-tab experience for a notification center, in a way you can fetch the notifications feed using a filtered query.

### Defining stores

To create multiple stores you can use the prop `stores` on the `NovuProvider` component. Each store has `storeId` property that will be used to interact with information related to this store.

```tsx theme={null}
<NovuProvider
  stores={[
    /**
	storeId and feedIdentifier must be identical and should be copied from In-App editor feed
  */
    {
      storeId: "product-updates",
      query: { feedIdentifier: "product-updates" },
    },
    { storeId: "user-activity", query: { feedIdentifier: "user-activity" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  <PopoverWrapper />
</NovuProvider>
```

Using the `query` object multiple fields can be passed for feed API:

* `feedIdentifier` - Can be configured and created on the WEB UI
* `seen` - Identifies if the notification has been seen or not

After specifying the `stores` prop, you can use the `storeId` property to interact with the store.

### Managing feeds on the web UI

1. How to add a new feed or select existing feed for In-App step?

To add a new feed, enable *Use Feeds* checkbox in In-App editor. Select from existing feeds or create a new feed by writing in the input field and then clicking on plus icon in the right side.

<Frame caption="Adding a new feed or selecting existing feed">
  <img src="https://mintcdn.com/novu-v2-docs/iBMuKOgzYB_2VB7w/images/notification-center/client/react/multiple-tabs/feeds-in-in-app.png?fit=max&auto=format&n=iBMuKOgzYB_2VB7w&q=85&s=bcc61da10ef510cba106ea691e694d3b" width="905" height="335" data-path="images/notification-center/client/react/multiple-tabs/feeds-in-in-app.png" />
</Frame>

2. How to copy `feedIdentifier` (`storeId`)

To copy `feedIdentifier` (`storeId`) click on the feed name of existing feeds. copy three dot icon. a menu will appear. click on Copy ID option to copy selected feed's `feedIdentifier`

<Frame caption="Copy feedIdentifier (storeId)">
  <img src="https://mintcdn.com/novu-v2-docs/iBMuKOgzYB_2VB7w/images/notification-center/client/react/multiple-tabs/feedIdentifier.png?fit=max&auto=format&n=iBMuKOgzYB_2VB7w&q=85&s=c82fbb3dc9e0cdc576e726b73782ba96" width="854" height="359" data-path="images/notification-center/client/react/multiple-tabs/feedIdentifier.png" />
</Frame>

<Info>
  By specifying only a storeId, without a query, you could get all notifications.
</Info>

### Using `tabs` prop on the notification center

```tsx theme={null}
<PopoverNotificationCenter
  colorScheme="dark"
  tabs={[
    // name can be any custom name
    { name: "Product Updates", storeId: "product-updates" },
    { name: "User Activity", storeId: "user-activity" },
  ]}
  colorScheme={colorScheme}
  onNotificationClick={handlerOnNotificationClick}
  onActionClick={handlerOnActionClick}
>
  {({ unseenCount }) => {
    return (
      <NotificationBell colorScheme={colorScheme} unseenCount={unseenCount} />
    );
  }}
</PopoverNotificationCenter>
```

<Frame caption="Multiple Tabs in notification center example">
  <img src="https://mintcdn.com/novu-v2-docs/iBMuKOgzYB_2VB7w/images/notification-center/client/react/multiple-tabs/multi-tabs.png?fit=max&auto=format&n=iBMuKOgzYB_2VB7w&q=85&s=f333775a797e7f3783be0a0dcebe2804" width="427" height="534" data-path="images/notification-center/client/react/multiple-tabs/multi-tabs.png" />
</Frame>

## Example

[![Edit tabs-in-in\_app](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/tabs-in-in-app-xdk74x?fontsize=14\&hidenavigation=1\&theme=dark)

## Important Links

<CardGroup cols={3}>
  <Card title="Get all feeds" icon="plug" color="#ea5a0c" href="/api-reference/feeds/get-feeds" />

  <Card title="Create a new feed" icon="plug" color="#0285c7" href="/api-reference/feeds/create-feed" />

  <Card title="Delete a feed" icon="plug" color="#0285c7" href="/api-reference/feeds/delete-feed" />
</CardGroup>
