---
name: "navigator"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "navigator - Page link for controlling miniapp navigation"
---

## navigator

> [VERSION] Base Library >= 2.10.0

### Description

Page link component for navigating between pages.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `hover-stop-propagation` | `boolean` | No | `false` | Whether to prevent this node’s ancestor nodes from showing the hover effect |
| `hover-start-time` | `number` | No | `20` | Delay before the pressed state appears after holding, in ms |
| `hover-stay-time` | `number` | No | `70` | Time to retain the pressed state after release, in ms |
| `url` | `string` | Yes | `""` | Target URL |
| `open-type` | `string` | No | `"navigate"` | Navigation method. Options: navigate (open a new page, can return), redirect (close the current page and navigate, cannot return), switchTab (navigate to a tabBar page), reLaunch (close all pages and navigate), navigateBack (go back to the previous page) |
| `delta` | `number` | No | `1` | Valid when open-type is 'navigateBack'; specifies the number of levels to go back. |
| `hover-class` | `any` | No | `"navigator-hover"` | CSS class applied on tap |

### Examples

#### Basic navigation

*index.tyml*

```xml
// index.tyml
<navigator url=\"/pages/detail/index\" class=\"nav-item\">Navigate to detail page</navigator>
<navigator url=\"/pages/detail/index?id=123\" class=\"nav-item\">Navigate with parameters</navigator>
<navigator url=\"/pages/detail/index\" open-type=\"redirect\" class=\"nav-item\">Redirect to detail page</navigator>
```

*index.tyss*

```css
.nav-item { padding: 20rpx; margin: 10rpx 0; background-color: #f5f5f5; border-radius: 8rpx; }
```

*index.js*

```javascript
Page({});
```

#### Navigation methods and active state

*index.tyml*

```xml
// index.tyml
<navigator url=\"/pages/home/index\" open-type=\"switchTab\" hover-class=\"nav-hover\" class=\"nav-item\">switchTab navigation</navigator>
<navigator url=\"/pages/home/index\" open-type=\"reLaunch\" hover-class=\"nav-hover\" hover-start-time=\"{{50}}\" hover-stay-time=\"{{200}}\" class=\"nav-item\">reLaunch navigation</navigator>
<navigator open-type=\"navigateBack\" delta=\"{{1}}\" class=\"nav-item\">Go back to previous page</navigator>
<navigator open-type=\"navigateBack\" delta=\"{{2}}\" hover-class=\"none\" class=\"nav-item\">Go back two levels (no hover state)</navigator>
```

*index.tyss*

```css
.nav-item { padding: 20rpx; margin: 10rpx 0; background-color: #f5f5f5; border-radius: 8rpx; }
.nav-hover { background-color: #e0e0e0; }
```

*index.js*

```javascript
Page({});
```


<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/page-navigator" 
  qrCodeUrl="/images/qrCode/navigator.png" 
  lang="en">
</DemoBlock>