---
title: "Nav Bar"
slug: "app-widget-nav-bar"
updated: 2022-07-14T08:33:00Z
published: 2022-07-14T08:33:01Z
canonical: "developer.comm100.com/app-widget-nav-bar"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.comm100.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Nav Bar

The widget appears as a tab on the left side of the agent console. Display the entry page you configured in the [manifest](/docs/app-manifest) in the tab.

Example manifest:

```
{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "navBar": {
        "id": "custom-tab",
        "url": "./index.html",
        "label": "Custom Tab"
      }
    }
  }
}
```

See [more introduction](/docs/app-manifest).

The following additional actions are available in this widget:

- [Chat](/docs/app-widget-live-chat-tab)
- [Ticket](/docs/app-widget-ticketing-messaging-tab)

## How to Use API

You must invoke api through SDK, which provides different methods, such as listening to events using the **on** method. Which method is used to call the api? It it desided by the providor.

Learn more for SDK view [here](/docs/guides-app-how-to-use-app-sdk-to-call-api).

## Actions

1. Set a badge for the extended tab.  

You can set a badge on the tab, e.g. the number of unprocessed messages.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| badge | number | It will display yellow badge on the top of tab when the value is more than `0` |

`Return:` No

`Example:`

```
const client = APPClient.init();
client.set("agentconsole.navBar.badge", badge);
```

2. Switch Nav Bar Use this API to switch to the specify tab according to the passed tab Id.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| id | string | The id of the nav bar, system tab Id: `visitor`, `chat`, `tickets` and `agent`. If it is extensive tab, use the widgetId instead. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.set("agentconsole.navBar.select", id);
```

## Events

1. Nav Bar switched event

You can listen to the following event to track left tab switched.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired when left tab changed. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.on("agentconsole.navBar.selected", function (leftTab) {
  // do stuff
});
```