# Applications-Nav Service

The Applications navigation section is found at the bottom of the left-hand sidebar of the Symphony client workspace. Use the `applications-nav` service to create a navigation item for your application:

```javascript
// To use the applications-nav service, you must subscribe to it from your application
var navService = SYMPHONY.services.subscribe("applications-nav");
```

The following methods are available on the `applications-nav` service:

* add
* remove
* count
* rename
* focus

## add()

Add a new navigation item to the Applications section of the left-hand sidebar:

```javascript
function add(id, title, serviceName)
```

<table data-header-hidden><thead><tr><th width="156.33333333333331">Parameter</th><th width="104">Type</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td></tr><tr><td>id</td><td>String</td><td>A unique id for this navigation item (must be unique across all navigation items of a given application)</td></tr><tr><td><strong>Either</strong> <code>title</code> <strong>or</strong> <code>{title, icon}</code></td><td>String or Object</td><td><strong>Either</strong> the title of the left navigation item as a string <strong>or</strong> an object with the keys <code>title</code> and <code>icon</code> where the value of <code>title</code> is a string and the value of <code>icon</code> is the url of a square SVG (recommended), or the url of a square png/jpg image. Recommended size is 32x32.</td></tr><tr><td>serviceName</td><td>String</td><td>The name of a local service implemented by your application that will be invoked when a user action is performed relating to the application navigation</td></tr></tbody></table>

{% hint style="info" %}
Note: You must implement the `select` method on your application service in order to handle clicks on the created left navigation item.
{% endhint %}

```javascript
// The application service that will be used to handle left navigation item clicks
var helloControllerService = SYMPHONY.services.register("hello:controller");

navService.add("hello-nav", "Hello World App", "hello:controller");

// Implement the select method on your application service
helloControllerService.implement({
  select: function(id) {
    if (id == "hello-nav") {
      console.log("hello-nav was selected.");
    }
  }
});
```

## remove()

Remove an existing application navigation item:

```javascript
function remove(id)
```

<table data-header-hidden><thead><tr><th width="152.33333333333331">Parameter</th><th width="91">Type</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td></tr><tr><td>id</td><td>String</td><td>The id of the navigation item that should be removed</td></tr></tbody></table>

```javascript
navService.remove('hello-nav');
```

## count()

Set the badge (notification) count on an application navigation item:

```javascript
function count(id, count)
```

<table data-header-hidden><thead><tr><th width="136.33333333333331">Parameter</th><th width="118">Type</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td></tr><tr><td>id</td><td>String</td><td>The id of the navigation item that should have its count updated</td></tr><tr><td>count</td><td>Integer</td><td>The new badge count number. Specifying 0 will hide the badge count.</td></tr></tbody></table>

```javascript
navService.count("hello-nav", count);
```

## rename()

Change the title of an existing application navigation item.

Note that this only changes the title of a specific navigation item -- not to all navigation items created by the application:

```javascript
function rename(id, title)
```

<table data-header-hidden><thead><tr><th width="155.33333333333331">Parameter</th><th width="104">Type</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td></tr><tr><td><code>id</code></td><td>String</td><td>The id of the navigation item that should be renamed</td></tr><tr><td><strong>Either</strong> <code>title</code> <strong>or</strong> <code>{title, icon}</code></td><td>String or Object</td><td><strong>Either</strong> the title of the left navigation item as a string <strong>or</strong> an object with the keys <code>title</code> and <code>icon</code> where the value of <code>title</code> is a string and the value of <code>icon</code> is the url of a square SVG (recommended), or the url of a square png/jpg image. Recommended size is 32x32.</td></tr></tbody></table>

```javascript
navService.rename('hello-nav', 'New Left Nav Title');
```

## focus()

Focus an existing application navigation item:

```javascript
function focus(id)
```

<table data-header-hidden><thead><tr><th width="146.33333333333331">Parameter</th><th width="98">Type</th><th>Description</th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td></tr><tr><td><code>id</code></td><td>String</td><td>The id of the application navigation item to focus</td></tr></tbody></table>

```javascript
navService.focus("hello-nav");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.developers.symphony.com/ext-apps/overview-of-extension-api/extension-api-services/applications-nav-service.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.