Link

The link field allows content writers to create web links. Relative and absolute URLs are supported, as well as linking to Prismic documents and media from the media library.

Add a link field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a link field

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a link field.

  The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The API ID determines the property name in the Document API. Use a short, snake-cased name.

  The Allow target blank checkbox determines if a content writer can configure a link to open in a new window.

• (Optional) Allow display text

  Links may need a text label, such as “Our products” or “Learn more.” Content writers can provide a label when display text is allowed.

  Open the field settings and check the Allow display text setting.

• (Optional) Allow variants

  Links may need a specific visual style, like “Primary” or “Secondary” styling. Content writers can select from a list of styles you set when variants are enabled.

  Open the field settings and enable variants under the Variants settings. Add as many variant options as needed.

• (Optional) Make the link field repeatable

  Content writers can provide multiple links from one field when the field is configured to be repeatable.

  Open the field settings and check the Make this link repeatable setting.

Display links

Prismic provides link components for Next.js, Nuxt, and SvelteKit.

<PrismicNextLink field={slice.primary.my_link_field} />

A repeatable link field can be displayed using a loop.

<ul>
  {slice.primary.my_link_field.map((link) => (
    <li key={link?.text}>
      <PrismicNextLink field={link} />
    </li>
  ))}
</ul>

Tips

• Use display text as labels

  The link’s text label can be managed in Prismic when display text is enabled. Prismic’s link components automatically display the text.

• Use variants to style links

  Link variants can determine how links are styled. This example adds a CSS class based on the selected variant.

  Next.jsNuxtSvelteKit

  <PrismicNextLink
    field={slice.primary.button}
    className={clsx("button", {
      primary: slice.primary.button.variant === "Primary",
      secondary: slice.primary.button.variant === "Secondary",
    })}
  />

  This example uses clsx to conditionally apply class names.

• Use isFilled.link() to check if a link field has a value

  import { isFilled } from "@prismic/client";
  
  if (isFilled.link(slice.primary.button)) {
    // Do something if `button` has a value.
  }

API response

Here is what a link field looks like from the Document API:

{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io"
  }
}

A link configured to open in a new window includes a target property.

{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io",
    "target": "_blank"
  }
}

A link that has display text or a variant includes a text or variant property.

{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io",
    "text": "Click Here",
    "variant": "Primary"
  }
}

A repeatable link is returned as an array of links.

{
  "example_link_to_media": [
    {
      "link_type": "Web",
      "url": "https://prismic.io"
    },
    {
      "link_type": "Web",
      "url": "https://prismic.io/docs"
    }
  ]
}