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.

Anatomy

<.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
  <.heroicon name="hero-arrow-top-right-on-square" />
</.navigate>
<.navigate to="/file.pdf" download="report.pdf">
  Download PDF
  <.heroicon name="hero-arrow-down-tray" />
</.navigate>
<.navigate to="/profile" aria_label="View profile">
  <.heroicon name="hero-user" />
</.navigate>

Style

If you wish to use the default Corex styling, you can use the link class on the component. This requires the corex_design dependency and mix corex.design.build; import the component css file.

@import "../corex/corex.css";

You can then use modifiers

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

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Variant (ui-solid, ui-nav), Size (ui-size-sm … ui-size-xl). See the modifier guide.

Variant modifiers control link surface treatment. Default is subtle (underline). Add ui-solid for a pill fill, or ui-nav for chrome-less navigation (ink color, no underline, aria-current weight and color).