Link Component

The Link component provides SPA-style navigation without page reloads. It renders a standard <a> element and automatically handles internal navigation via history.pushState, while allowing normal browser behavior for external links.

Setup

Import Link from metaowl and register it in your component's static components:

import { Component } from '@odoo/owl'
import { Link } from 'metaowl'

export class MyNav extends Component {
  static template = 'MyNav'
  static components = { Link }

  setup() {
    this.linkClass = (href) => {
      const base = 'block px-3 py-2 rounded-md text-sm'
      const active = 'bg-gray-100 text-gray-900'
      const inactive = 'text-gray-600 hover:bg-gray-100'
      const isActive = window.location.pathname === href
      return base + ' ' + (isActive ? active : inactive)
    }
  }
}

Basic Usage

Prop values are OWL expressions — wrap static strings in extra quotes, or pass method calls:

<!-- Internal link -->
<Link to="'/about'">About Us</Link>

<!-- Dynamic target from loop -->
<Link to="item.href"><t t-esc="item.label"/></Link>

<!-- Computed class via method -->
<Link to="item.href" class="linkClass(item.href)">
  <t t-esc="item.label"/>
</Link>

<!-- External link - opens normally (auto-detected, no SPA) -->
<Link to="'https://github.com/odoo/owl'" target="'_blank'">
  OWL Framework
</Link>

<!-- External with dynamic target, closing sidebar on click -->
<Link
  to="link.href"
  target="link.external ? '_blank' : undefined"
  t-on-click="props.onClose"
  class="linkClass(link.href)"
  activeClass="'text-yellow-500'"
>
  <span t-esc="link.label"/>
</Link>

Props

Any additional attribute (id, style, aria-*, data-*, etc.) is forwarded directly to the rendered <a> element.

Prop	Type	Required	Description
`to`	`string`	Yes	Target URL (internal path or external URL)
`class`	`string`	No	CSS classes for the anchor element
`activeClass`	`string`	No	Extra CSS classes added when the link is active (current route matches `to`)
`target`	`string`	No	Target window (`_blank`, `_self`, etc.)
`rel`	`string`	No	Relationship attribute (auto-set to `noopener noreferrer` for external `_blank` links)
`download`	`string \| boolean`	No	Download attribute for file downloads
`hreflang`	`string`	No	Language of the linked resource
`type`	`string`	No	MIME type hint
`ping`	`string`	No	Space-separated URLs to ping on click
`referrerpolicy`	`string`	No	Referrer policy override
`media`	`string`	No	Media query hint

External Link Detection

The component automatically detects external links and performs normal navigation. URLs starting with https:// or http://, as well as special protocols like mailto:, tel:, and ftp: are treated as external and bypass the SPA router.

<!-- These are automatically treated as external -->
<Link to="'https://example.com'">External site</Link>
<Link to="'mailto:hello@example.com'">Send email</Link>
<Link to="'tel:+1234567890'">Call us</Link>

<!-- Internal links use SPA navigation -->
<Link to="'/about'">About Us</Link>
<Link to="'/docs/getting-started'">Getting Started</Link>

Use navigateTo() for programmatic navigation in JavaScript:

import { navigateTo } from 'metaowl'

// Navigate to a new route
await navigateTo('/dashboard')

// Replace current history entry (no back button)
await navigateTo('/login', { replace: true })

Router API

You can also use the router object directly for more control:

import { router, navigateTo } from 'metaowl'

// Navigation
router.push('/path')           // Navigate to path
router.replace('/path')        // Replace current history entry
router.navigateTo('/path')     // SPA navigation
router.back()                  // Go back
router.forward()               // Go forward
router.go(-2)                  // Go 2 steps back