Skip to main content

Link

Accessible link component with external link handling and router integration.

Usage​

<w-link href="/about">About Us</w-link>

Props​

PropTypeDefaultDescription
hrefstring""Link destination
externalbooleanfalseOpens in new tab with security
disabledbooleanfalseDisables the link
variantstring"default"Style variant: default, subtle, underline

Examples​

<w-link href="/home">Go Home</w-link>
<w-link href="https://github.com" external>
  View on GitHub
</w-link>

When external is set:

  • Opens in new tab (target="_blank")
  • Adds rel="noopener noreferrer" for security
  • Prevents tabnabbing attacks
<w-link href="/premium" disabled>
  Premium Feature (Coming Soon)
</w-link>

With Navigation​

w-link integrates seamlessly with w-nav for site navigation:

<w-nav label="Main navigation">
  <w-slot item><w-link href="/home">Home</w-link></w-slot>
  <w-slot item><w-link href="/about">About</w-link></w-slot>
  <w-slot item><w-link href="https://docs.example.com" external>Docs</w-link></w-slot>
</w-nav>

With Breadcrumb​

<w-breadcrumb label="Breadcrumb">
  <w-slot item><w-link href="/">Home</w-link></w-slot>
  <w-slot sep><span>/</span></w-slot>
  <w-slot item><w-link href="/products">Products</w-link></w-slot>
  <w-slot sep><span>/</span></w-slot>
  <w-slot item><span aria-current="page">Widget</span></w-slot>
</w-breadcrumb>

Styling​

/* Base link styles */
w-link {
  color: #0066cc;
}

w-link:hover {
  text-decoration: underline;
}

/* External link indicator */
w-link[external]::after {
  content: " ↗";
  font-size: 0.8em;
}

/* Disabled state */
w-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variants */
w-link[variant="subtle"] {
  text-decoration: none;
}

w-link[variant="underline"] {
  text-decoration: underline;
}

Router Integration​

When used with waria.start({ hash: true }), links inside w-nav are automatically converted to hash-based URLs for client-side routing:

<!-- This link -->
<w-link href="/about">About</w-link>

<!-- Becomes (in hash mode) -->
<w-link href="#/about">About</w-link>

Accessibility​

  • Proper link semantics with <a> element
  • External links include security attributes
  • Disabled state uses aria-disabled and prevents navigation
  • Works with keyboard navigation (Tab, Enter)
  • Screen readers announce external links appropriately