---
title: "Navigation via JavaScript"
manual: "TYPO3 Explained"
version: "11.5"
permalink: "https://docs.typo3.org/permalink/t3coreapi:javascript-navigation@11.5"
source: "ApiOverview/JavaScript/Navigation/Index.rst"
rendered: "2026-10-21T15:30:00+00:00"
---

> [!WARNING]
> **Attention**
>
> TYPO3 v11 has reached end-of-life as of October 31th 2024 and
> is no longer being maintained. Use the version switcher on the top
> left of this page to select documentation for a supported version of TYPO3.
>
> Need more time before upgrading?
> You can purchase Extended Long Term Support (ELTS) for TYPO3 v11 here:
> [TYPO3 ELTS](https://typo3.com/services/extended-support-elts).

# Navigation via JavaScript {#javascript-navigation}

## Navigate to URL {#navigate-to-url}

Navigate to a URL once selected drop-down is changed:

```html
<select data-global-event="change" data-action-navigate="$value">'
```

`$value` refers to selected value.

## Navigate to URL with Data {#navigate-to-url-with-data}

Navigate to a URL on change of a drop-down, including the selected value in the URL:

```html
<select value="0" name="depth" data-global-event="change"
   data-action-navigate="$data=~s/$value/" data-navigate-value="https://example.org/${value}">
```

`$data` refers to value of `data-navigate-value`, `$value` to selected value,
`$data=~s/$value/` replaces literal `${value}` with selected value in `:html:`data-navigate-value\`

## Show Info Popup {#show-info-popup}

Invoke `TYPO3.InfoWindow.showItem` module function to display details for a given
record:

```html
data-dispatch-action="TYPO3.InfoWindow.showItem" data-dispatch-args-list="be_users,123">
<!-- ... or (using JSON arguments) ... -->
data-dispatch-action="TYPO3.InfoWindow.showItem" data-dispatch-args="[&quot;tt_content&quot;,123]">
```

Shows the info popup of database table `tt_content`, having `uid=123` in the example above.