Skip to content

docs(item): add routing section explaining how routerLink works #4456

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShaneK merged 2 commits into from
Mar 31, 2026
+107 −2
Merged

docs(item): add routing section explaining how routerLink works #4456

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ed632b
docs(item): add routing section explaining how routerLink works
ShaneK Mar 26, 2026
7c3ecd9
Merge branch 'major-9.0' of github.com:ionic-team/ionic-docs into v9/…
ShaneK Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 107 additions & 2 deletions docs/api/item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import Slots from '@ionic-internal/component-api/v9/item/slots.md';

import useBaseUrl from '@docusaurus/useBaseUrl';
import BestPracticeFigure from '@components/global/BestPracticeFigure';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<head>
<title>ion-item: Input, Edit, or Delete iOS and Android Item Elements</title>
Expand Down Expand Up @@ -163,13 +165,116 @@ import Controls from '@site/static/usage/v9/item/content-types/controls/index.md

## Clickable Items

An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
An item is considered "clickable" if it has an `href`, `button`, or `routerLink` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.

import Clickable from '@site/static/usage/v9/item/clickable/index.md';

<Clickable />


## Routing

Items support client-side navigation using the `routerLink` property. Setting `routerLink` renders the item as an anchor and navigates to the specified route when tapped. The `routerDirection` property controls the transition animation direction, and `routerAnimation` accepts a custom animation builder.

<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

In Angular, `routerLink` is a directive provided by `@angular/router`. When used on Ionic components, also import `IonRouterLink` from `@ionic/angular/standalone` to enable `routerDirection` and `routerAnimation` support.

```html
<ion-list>
<ion-item [routerLink]="['/home']">
<ion-label>Go to Home</ion-label>
</ion-item>
<ion-item [routerLink]="['/home']" routerDirection="back">
<ion-label>Go Back to Home</ion-label>
</ion-item>
</ion-list>
```

```typescript
import { Component } from '@angular/core';
import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular/standalone';
import { RouterLink } from '@angular/router';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
imports: [IonItem, IonLabel, IonList, RouterLink, IonRouterLink],
})
export class ExampleComponent {}
```

</TabItem>

<TabItem value="javascript">

In JavaScript, set the `router-link` attribute on `ion-item` to navigate using [ion-router](./router).

```html
<ion-list>
<ion-item router-link="/home">
<ion-label>Go to Home</ion-label>
</ion-item>
<ion-item router-link="/home" router-direction="back">
<ion-label>Go Back to Home</ion-label>
</ion-item>
</ion-list>
```

</TabItem>

<TabItem value="react">

In React, `IonItem` accepts a `routerLink` prop that triggers client-side navigation via Ionic's React Router integration.

```tsx
import { IonItem, IonLabel, IonList } from '@ionic/react';

function Example() {
return (
<IonList>
<IonItem routerLink="/home">
<IonLabel>Go to Home</IonLabel>
</IonItem>
<IonItem routerLink="/home" routerDirection="back">
<IonLabel>Go Back to Home</IonLabel>
</IonItem>
</IonList>
);
}
export default Example;
```

</TabItem>

<TabItem value="vue">

In Vue, use the `router-link` attribute on `ion-item`. The `router-direction` and `router-animation` attributes are also available for controlling the transition.

```html
<template>
<ion-list>
<ion-item router-link="/home">
<ion-label>Go to Home</ion-label>
</ion-item>
<ion-item router-link="/home" router-direction="back">
<ion-label>Go Back to Home</ion-label>
</ion-item>
</ion-list>
</template>

<script setup lang="ts">
import { IonItem, IonLabel, IonList } from '@ionic/vue';
</script>
```

</TabItem>

</Tabs>


## Detail Arrows

By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
Expand Down Expand Up @@ -292,4 +397,4 @@ When an `<ion-item>` renders a native `<a>` element, the keyboard interactions f
<CustomProps />

## Slots
<Slots />
<Slots />
Loading