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

Anchor to propsProps

Anchor to to to string required: The target path to navigate to
Anchor to children children React.ReactNode: Content to render inside the link
Anchor to onClick onClick React.MouseEventHandler<HTMLAnchorElement>: Click handler called before navigation

Examples

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="/products">Products</TransitionLink>

</nav>

)

}

function App() {

return (

<div>

</Routes>

</MinisRouter>

</div>

)

}

export default App

Examples

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

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

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

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

Was this page helpful?