# `Bylaw.Credo.Check.HEEx.PreferLinkForNavigation`
[🔗](https://github.com/ryanzidago/bylaw/blob/v0.4.0/lib/bylaw/credo/check/heex/prefer_link_for_navigation.ex#L1)

## Basics

> #### This check is disabled by default. {: .neutral}
>
> [Learn how to enable it](`e:credo:config_file.html#checks`) via `.credo.exs`.

This check has a base priority of `high` and works with any version of Elixir.

## Explanation

Prefers link semantics over button semantics for durable HEEx/HTML navigation.

Links represent destinations, so browsers and assistive technologies can
expose them as navigation and users can open, copy, or revisit them normally.
Buttons should trigger actions; using one for navigation hides that contract
and makes progressive enhancement and keyboard behavior less predictable.

## Examples

Embedded `~H` templates are checked during normal Credo runs over Elixir
files. Standalone `.html.heex` templates require enabling
`Bylaw.Credo.Plugin.HEExSources` in Credo's `plugins` configuration.
Avoid:

      ~H"""
      <button phx-click={JS.navigate(~p"/settings")}>Settings</button>
      <div phx-click={JS.patch(~p"/users")}>Users</div>
      <.button phx-click={JS.navigate(~p"/billing")}>Billing</.button>
      <button phx-click={Phoenix.LiveView.JS.patch("/users")}>Users</button>
      """
Prefer:

      ~H"""
      <a href={~p"/settings"}>Settings</a>
      <.link patch={~p"/users"}>Users</.link>
      <.link navigate={~p"/billing"}>Billing</.link>
      """

## Notes

Embedded `~H` templates in `.ex` and `.exs` files are checked by Credo's normal source traversal. Standalone `.html.heex` templates are checked when `Bylaw.Credo.Plugin.HEExSources` is enabled in `.credo.exs`.

This check uses Phoenix LiveView's undocumented HEEx tokenizer when it is available. Add `phoenix_live_view` to applications that enable this check.

This check uses static HEEx token analysis, so it reports only patterns visible in the template source.

This check enforces link semantics for durable navigation so users keep native browser behaviors such as opening a destination in a new tab, copying the URL, and using standard link interactions.

This check reports non-link HEEx tags and components whose `phx-click`
expression contains an explicit `JS.navigate/1-3`, `JS.patch/1-3`,
`Phoenix.LiveView.JS.navigate/1-3`, or `Phoenix.LiveView.JS.patch/1-3` call.
Native `<a>` tags and the standard `<.link>` component are allowed here as
link primitives. The check does not attempt to infer event-name strings or
dynamic expressions that do not contain one of those explicit navigation
calls.

## Options

This check has no check-specific options. Configure it with an empty option list.

## Usage

Add this check to Credo's `checks:` list in `.credo.exs`:

```elixir
%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.PreferLinkForNavigation, []}
      ]
    }
  ]
}
```

## Check-Specific Parameters

*There are no specific parameters for this check.*

## General Parameters

Like with all checks, [general params](`e:credo:check_params.html`) can be applied.

Parameters can be configured via the [`.credo.exs` config file](`e:credo:config_file.html`).

---

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