Watch a live product demo πŸ‘€ See how Sanity powers richer commerce experiences

How to Add Internal Links to Top Level Singletons

4 replies
Last updated: Mar 28, 2022
What is the best way to add internal links to my top level singletons using this same cta object?

export default {
  title: "Call to action",
  name: "cta",
  type: "object",
  validation: (Rule) =>
    Rule.custom(
      (fields = {}) =>
        !<http://fields.post|fields.post> || !fields.link || "Only one link type is allowed"
    ),
  fieldsets: [
    {
      title: "Link",
      name: "link",
    },
  ],
  fields: [
    {
      title: "Title",
      name: "title",
      type: "string",
    },
    {
      name: "show",
      title: "Show (leave unchecked to hide CTA)",
      type: "boolean",
    },
    {
      title: "Internal link",
      description: "Use this to link between pages on the website",
      name: "post",
      type: "reference",
      to: [{ type: "post" },{ type: "project" }],
      fieldset: "link",
    },
    {
      title: "External link",
      name: "link",
      type: "url",
      fieldset: "link",
    },
  ],
Mar 26, 2022, 7:13 PM
Typically I include the singletons in the reference array and deal with handling the slugs in groq.

{
  title: "Internal link",
  description: "Use this to link between pages on the website",
  name: "post",
  type: "reference",
  to: [
    { type: 'home' },
    { type: 'about' },
    { type: 'info' },
    { type: "post" },
    { type: "project" }
  ],
  fieldset: "link",
},
Then something like this in groq:

/* groq */`
  title,
  link,
  post-&gt;_type == "project" =&gt; {
    "link": "/project/" + post-&gt;slug.current
  },
  post-&gt;_type == "post" =&gt; {
    "link": "/post/" + post-&gt;slug.current
  },
  post-&gt;_type == "about" =&gt; {
    "link": "/about
  }
`
Mar 26, 2022, 7:34 PM
Thanks
user J
Mar 26, 2022, 7:40 PM
user B
Hello .What do you use for coding ? React ?
I'm trying to find a way to add intrenal link in my own website ( not between sanity post ) but couldn't find something working so far with my nextJs project .Thanks
Mar 28, 2022, 8:04 AM
ok find a way with this
  const serializers = {
    marks: {
      link: ({ children, value }) =&gt;
        value.blank === false ? (
          &lt;Link href={value.href}&gt;
            &lt;a className={styles["internal-link"]}&gt;{children}&lt;/a&gt;
          &lt;/Link&gt;
        ) : (
          &lt;&gt;
            &lt;a
              className={styles["external-link"]}
              href={value.href}
              target="_blank"
              rel="noopener noreferrer"
            &gt;
              {`${children}β†—`}
            &lt;/a&gt;{" "}
          &lt;/&gt;
        ),
    },
Still try to understand how to do link in a post for another post .
Thanks
Mar 28, 2022, 10:57 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing