Best way to create simple <a> tag links from Dato to Frontend

[doliveira]

Hi, I’m using Gatsby to generate the front end, and trying to create a Model to store Menu Navigations (top nav, footer, etc).

Right now, I’m using structured text just for the purpose of typing a link text and inserting a link, so I can access Dato’s referencing features for Pages and Posts.

However, when I source the data, the link is wrapped in a

tag, likely due to the fact that I’m typing in a paragraph structure in Structured text.

Is there a better way to create links other than using Structures Text? I started off using simple Text fields, but then realized I couldn’t easily create an easy experience for content editors to choose links based on an External URL, internal pages, Open in a new tab or not, add meta data such as anchors, etc.

[m.finamor]

Hello @doliveira

As you said, that is indeed the intended way to create links inside the structured text field, and as a default it wraps every element in a <p> tag.
If you’d like to change that on your front end, you could use a customNodeRule to change how each node (like a paragraph or an anchor tag) are rendered into HTML. You can read about how to do this here: GitHub - datocms/react-datocms: A set of components and utilities to work faster with DatoCMS in React environments