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.

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 class link on the component. This requires 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">

Learn more about modifiers and Corex Design