Link

Accessible link component with external link handling and router integration.

Usage

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

Props

Prop	Type	Default	Description
href	string	""	Link destination
external	boolean	false	Opens in new tab with security
disabled	boolean	false	Disables the link
variant	string	"default"	Style variant: default, subtle, underline

Examples

Basic Link

<w-link href="/home">Go Home</w-link>

External 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

Disabled Link

<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

State and variants are exposed via host attributes. The library sets pointer-events: none and opacity: 0.5 on the inner <a> automatically when [disabled].

w-link {
  color: #0066cc;
}
w-link:hover {
  text-decoration: underline;
}
w-link[external]::after {
  content: " ↗";
  font-size: 0.8em;
}

Selector	Targets
w-link[external]	External (new-tab) links
w-link[disabled]	Disabled link (already non-interactive)
w-link[variant="subtle"]	Variant override
w-link[variant="underline"]	Variant override
w-link > a	The internal anchor element

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