Renders an anchor element for navigation based of Phoenix Core Components and Phoenix Link

Supports plain href, LiveView navigate, and LiveView patch. External links should be flagged with the external attribute. Icon-only links must pass aria_label to screen readers.

This is the link counterpart to Corex.Action (button): to + type select the link mode; method and replace are the same knobs Phoenix’s unified button forwards on {@rest} when it renders <.link>, exposed here as named attrs so call sites stay explicit. Any other link attributes go through rest.

Examples

    <.navigate to="/about">About</.navigate>
    <.navigate to={~p"/dashboard"} type="navigate">Dashboard</.navigate>
    <.navigate to={~p"/items"} type="patch">Filter</.navigate>
    <.navigate to="https://example.com" external>
      External
      <svg aria-label="Opens in a new window" ...>...</svg>
    </.navigate>
    <.navigate to="/file.pdf" download="report.pdf">
      Download PDF
      <svg aria-label="Download PDF, 2MB" ...>...</svg>
    </.navigate>
    <.navigate to="/profile" aria_label="View profile">
      <svg aria-hidden="true" ...></svg>
    </.navigate>

Styling

If you wish to use the default Corex styling, you can use the link class on the component. This requires you to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/link.css";

You can then use modifiers

<.navigate class="link link--accent link--lg">