# `PhoenixKitWeb.Components.Core.RowLink`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v2.13.7/lib/phoenix_kit_web/components/core/row_link.ex#L1)

Stretched link that makes a whole table row (or card) clickable with a
single real `<a>` element.

Render it once at the START of the row's first cell. The row (or card)
must be a positioned ancestor (`relative`); the link paints an
`::after` overlay across it. Interactive siblings — row menus, buttons,
other links — need `relative z-10` to stay clickable above the overlay.
The link's accessible name comes from `label` (visually hidden).

## Table rows need `transform-gpu` (Safari)

Safari/WebKit ignores `position: relative` on `<tr>`, so on a `<tr>` host the
overlay escapes to the `<table>` and every row's overlay collapses onto the
last row — on iOS/iPadOS every row then navigates to the LAST one. Give any
`<tr>` host Tailwind's `transform-gpu` (`translateZ(0)`), which WebKit *does*
honor as a containing block. Card/`<div>` hosts don't need it.

`transform-gpu` is a stock Tailwind utility, so nothing has to be added to the
host application's stylesheet. Do **not** depend on a custom class such as
`row-link-host` for this: that rule lives in one host app's `app.css` and is
absent from every other consumer, where the failure is invisible in source and
only shows up on an iOS device.

## Import

Not wired into `PhoenixKitWeb, :live_view` — a host app that defines its own
`row_link/1` would get an ambiguous import. Each LiveView imports it directly:

    import PhoenixKitWeb.Components.Core.RowLink, only: [row_link: 1]

## Example

    <.table_default_row class="relative transform-gpu cursor-pointer">
      <.table_default_cell>
        <.row_link navigate={Routes.path("/admin/orders/123")} label="Open order #123" />
        #123
      </.table_default_cell>
      <.table_default_cell class="relative z-10"><.table_row_menu .../></.table_default_cell>
    </.table_default_row>

# `row_link`

## Attributes

* `navigate` (`:string`) (required)
* `label` (`:string`) (required) - accessible name for the link (rendered sr-only).

---

*Consult [api-reference.md](api-reference.md) for complete listing*