Link

Active State

Highlight the current/active link in navigation or tabs.

<%= rui_link("#", "Active", active: true) %>

<%= rui_link("/posts", "Posts", active: current_page?("/posts")) %>

Tooltips

Add tooltip text that appears on hover.

<%= rui_link("/docs", "API", title: "View API Documentation") %>
<%= rui_link("/docs", "API", tooltip: "View API Documentation") %>

Text Truncation

Automatically truncate long text with tooltip showing full text.

<%= rui_link("/posts/1", @post.very_long_title, truncate: true) %>

<%= rui_link("/posts/1", @post.title, truncate: 50) %>

Download Links

Create file download links with the download attribute.

<%= rui_link("/files/report.pdf", "Download Report", download: true) do |link| %>
  <% link.with_icon(:download) %>
<% end %>

<%= rui_link("/files/data.csv", "Export Data", download: "monthly-export.csv") %>

URL Parameters & Anchors

Build dynamic URLs with query parameters and anchor fragments. Use empty URL with anchor for in-page navigation (table of contents, jump to section, etc).

<%= rui_link("/posts", "Filter", params: { category: "rails", sort: "recent" }) %>

<%= rui_link("", "Jump to Section", anchor: "my-section") %>

<%= rui_link("/docs/link", "Jump to Advanced", anchor: "advanced") %>

<%= rui_link("/posts", "Rails Posts", params: { category: "rails" }, anchor: "results") %>

<%= rui_link("", "Table of Contents", anchor: "toc", scroll: :smooth) %>

Full Width Links

Make links stretch to fill their container width, useful for mobile menus and card actions.

<div class="max-w-sm space-y-2">
  <%= rui_link("/dashboard", "Dashboard", full_width: true) do |link| %>
    <% link.with_icon(:arrow_right, position: :trailing) %>
  <% end %>

  <%= rui_link("/settings", "Settings", full_width: true) do |link| %>
    <% link.with_icon(:settings) %>
  <% end %>
</div>

<div class="max-w-sm">
  <%= rui_link("/admin", "Admin Panel", full_width: true) %>
</div>

Enhanced Rel Attributes

Full control over link relationships for SEO and security.

<%= rui_link("https://example.com", "Sponsor", rel: "sponsored", external: true) %>

<%= rui_link(url, "UGC", rel: "ugc nofollow", external: true) %>

Scroll Behavior

Control scroll animation for anchor links.

<%= rui_link("#features", "Features", scroll: :smooth) %>

<%= rui_link("#top", "Back to Top", scroll: :instant) %>

Multilingual Links (HrefLang)

Indicate the language of the linked resource for SEO.

<%= rui_link("/fr/about", "À propos", hreflang: "fr") %>
<%= rui_link("/es/about", "Acerca de", hreflang: "es") %>

Referrer Policy

Control what referrer information is sent for privacy.

<%= rui_link("https://example.com", "Link", referrerpolicy: "no-referrer", external: true) %>

<%= rui_link("https://example.com", "Link", referrerpolicy: "origin", external: true) %>

Link Within Paragraph

<p>
  Learn more in our <%= rui_link("/docs", "documentation") %> or
  check the <%= rui_link("https://github.com", "code", external: true) %>
</p>

Icon Links

Perfect for actions and navigation.

<%= rui_link("#") do |link| %>
  <% link.with_icon(:download) %>
  Download PDF
<% end %>

Call-to-Action Links

Prominent links for important actions.

<% rui_link("/signup", size: :lg, color: :primary) do |link| %>
  Get Started
  <% link.with_icon(:arrow_right) %>
<% end %>

<% rui_link("/join", size: :lg, color: :blue) do |link| %>
  Ready to join?
  <% link.with_icon(:door_open, position: :trailing, color: :red) %>
<% end %>

<% rui_link("/pricing", size: :lg, color: :success) do |link| %>
  <% link.with_icon(:credit_card) %>
  View Pricing
<% end %>

Card with Action Link

Cards with prominent action links.

<div class="card">
  <h4>Featured Post</h4>
  <p>Description...</p>
  <% rui_link("/posts/1") do |link| %>
    Read more
    <% link.with_icon(:arrow_right, position: :trailing) %>
  <% end %>
</div>

Navigation with Active States

Using unless_current for navigation menus.

<nav>
  <%= rui_link("/", "Home", unless_current: true) %>
  <%= rui_link("/about", "About", unless_current: true) %>
  <%= rui_link("/blog", "Blog", unless_current: true) %>
</nav>

List of Related Links

Common pattern for resource lists.

<ul>
  <li>
    <% rui_link("/docs/button", variant: :hover_underline) do |link| %>
      <% link.with_icon(:circle) %>
      Button Component
    <% end %>
  </li>
</ul>