---
title: TransitionLink
description: >-
  Navigation component that triggers animated page changes based on CSS View
  Transitions.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/navigation/transitionlink'
  md: >-
    https://shopify.dev/docs/api/shop-minis/components/navigation/transitionlink.md
---

# TransitionLink

Navigation component that triggers animated page changes based on CSS View Transitions. Use instead of React Router's `Link` or `<a>` tags when you want smooth native feeling navigation within your Mini. Should be wrapped within a `MinisRouter`.

**Caution:**

In order for the animation transitions to work, you need to enable view transitions in `MinisRouter`

#### Props

* **to**

  **string**

  **required**

  The target path to navigate to

* **children**

  **React.ReactNode**

  Content to render inside the link

* **onClick**

  **React.MouseEventHandler\<HTMLAnchorElement>**

  Click handler called before navigation

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'
  import {MinisRouter, TransitionLink} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'

  function Navigation() {
    return (
      <nav>
        <TransitionLink to="/">Home</TransitionLink>
        <TransitionLink to="/products">Products</TransitionLink>
        <TransitionLink to="/cart">Cart</TransitionLink>
      </nav>
    )
  }

  function App() {
    return (
      <div>
        <MinisRouter viewTransitions>
          <Routes>
            <Route path="/" element={<Navigation />} />
          </Routes>
        </MinisRouter>
      </div>
    )
  }

  export default App
  ```

* ####

  ##### Description

  Basic navigation link with transitions

  ##### tsx

  ```tsx
  import React from 'react'
  import {MinisRouter, TransitionLink} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'

  function Navigation() {
    return (
      <nav>
        <TransitionLink to="/">Home</TransitionLink>
        <TransitionLink to="/products">Products</TransitionLink>
        <TransitionLink to="/cart">Cart</TransitionLink>
      </nav>
    )
  }

  function App() {
    return (
      <div>
        <MinisRouter viewTransitions>
          <Routes>
            <Route path="/" element={<Navigation />} />
          </Routes>
        </MinisRouter>
      </div>
    )
  }

  export default App
  ```

* ####

  ##### Description

  Styled navigation link with custom classes

  ##### tsx

  ```tsx
  import React from 'react'
  import {TransitionLink} from '@shopify/shop-minis-react'

  function StyledNavigation() {
    return (
      <nav className="navigation">
        <TransitionLink
          to="/products/123"
          className="product-link"
          style={{ color: '#007AFF', textDecoration: 'none' }}
        >
          View Product Details
        </TransitionLink>

        <TransitionLink
          to="/cart"
          className="cart-link"
          aria-label="Go to shopping cart"
        >
          <span>Shopping Cart</span>
          <span className="cart-count">(3)</span>
        </TransitionLink>
      </nav>
    )
  }

  export default StyledNavigation
  ```

* ####

  ##### Description

  Navigation with custom click handler

  ##### tsx

  ```tsx
  import React from 'react'
  import {TransitionLink} from '@shopify/shop-minis-react'

  function NavigationWithAnalytics() {
    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
      // Track analytics event
      console.log('Navigation clicked:', event.currentTarget.href)

      // You can prevent navigation by calling event.preventDefault()
      // event.preventDefault()
    }

    return (
      <div>
        <TransitionLink
          to="/products/special-offer"
          onClick={handleLinkClick}
        >
          Special Offer - Click tracking enabled
        </TransitionLink>

        <TransitionLink
          to="/checkout"
          onClick={(e) => {
            // Confirm before navigating
            const confirmed = window.confirm('Proceed to checkout?')
            if (!confirmed) {
              e.preventDefault()
            }
          }}
        >
          Proceed to Checkout
        </TransitionLink>
      </div>
    )
  }

  export default NavigationWithAnalytics
  ```

***