A semantic element for navigation between pages.


There are 3 types of links: a plain old <a> tag, your framework's <Link /> component, and React Aria's <Link /> component. Let's take a look at each one.

Plain old <a> tags

Plain old <a> tags should be used when linking outside your app.

Your framework's <Link /> component

Your framework's <Link /> component should be used when linking inside your app. This component is responsible for:

  • doing an internal pushState
  • resolving relative route paths
  • prefetching app assets
  • adding active/pending styles/classes
  • adding location.state

None of which have anything to do with an <a> that links to an external route. You can't pushState to a different origin, resolve relative paths, prefetch, add location state, or add active/pending styles when going there. For those, you'll need to use a plain old <a> tag, instead of you framework's <Link> component.

This being said, most frameworks's <Link /> components (like Next and Remix) detects whether the link is internal or external so you don't need to remember to either use a plain-old <a> tag or your framework's <Link /> component depending on whether your link is internal or external. Just use your frameworks's <Link /> and it will do the right thing.

React Aria's <Link /> component

React Aria also has its own <Link /> component with its own functionality.

Unfortunately complete integration between your framework's <Link /> and React Aria's <Link /> is a hard problem that isn't yet solved. We can't yet have React Aria <Link />'s with prefetching in Remix, for example.

But we can have partial integration, insofar as we can get React Aria <Link /> to use client-side routing, as opposed to a full-page reload - which is what happens when you use a React Aria <Link /> without any integration. So please follow this guide to integrate React Aria links with your framework.

State of the art

So we can't yet have a unified <Link /> component.

The <Link /> component described in this page is your framework's <Link /> component which will be used to navigate around your app (and outside it).

You'll be implicitly using React Aria's <Link /> when importing from components that have links. For example, the <Breadcrumbs /> component has a <BreadcrumbsLink /> component that's just a React Aria's <Link /> component under the hood. Just keep in mind that, unlike this <Link />, those links won't be able to do framework-specific things like prefetching or supporting functional props. At least not yet.


The features of this component are dependent on your framework of choice. If you have a choice between choosing a <Link /> component and a navigation-aware <NavLink />, choose the <NavLink /> so you can take advantage of the active/pending states.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
<Link to="/components/navigation/link" prefetch="intent">
{({ isActive }) => (isActive ? 'This is active link' : 'This is an inactive link')}
</Link>{' '}
while{' '}
<Link to="/components/navigation/breadcrumbs" prefetch="intent">
{({ isActive }) => (isActive ? 'this is active link' : 'this is an inactive link')}

Here's the <Link /> component in action, using the <NavLink /> component from Remix under the hood.

This is an inactive link while this is an inactive link



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
/* ### Navigation ### */
@layer components {
.link {
@apply underline;