Anchor

The Mishka Chelekom Headless Anchor is a Phoenix function component for links. It renders a plain <a> from href, or a LiveView <.link> when you pass navigate or patch. Link attributes such as target, rel, download and replace, along with aria-* and phx-* attributes, pass through to the element.

The anchor has no parts and no data states. The link always carries the class chelekom-anchor, next to the classes you pass in class, so color, underline, hover and focus styles are Tailwind utilities on the link itself.

href renders a normal link. navigate renders <.link navigate>, which moves to another LiveView. patch renders <.link patch>, which stays in the current LiveView and calls handle_params/3. If you pass more than one, navigate wins, then patch, then href. Add replace to a navigate or patch link to replace the history entry instead of adding one. id is optional.

<.anchor navigate={~p"/blog"} class="underline">Blog</.anchor>

<.anchor patch={~p"/blog?page=2"} replace class="underline">Next page</.anchor>

<.anchor href="/files/report.pdf" download class="underline">Download the report</.anchor>

The anchor is a native link, so Enter follows it and screen readers announce it as a link, as described by the WAI-ARIA Link pattern. The component draws no focus ring, so keep one with focus-visible: utilities. If a link opens a new tab, say so in the link text.