Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action


Renders a CMS link.

<Scrivito.LinkTag to={Scrivito.Obj.root()}> Back to homepage </Scrivito.LinkTag>

Renders an <a href> link to the specified resource. The to prop is passed to navigateTo on click.


  • to (Obj, Link) – the CMS object or CMS link to visit when clicking the link.
  • params (Object) – used to build the query part of the URL.
  • onClick (Function) – your own event handler. This optional prop causes the specified function to be executed when the link is clicked. The function receives an event of the React.MouseEvent type. One can call preventDefault on the event to prevent the redirection.


  • The children of the component are rendered as children of the a tag.
  • Other props are rendered as attributes of the resulting a tag.


Render a navigation list comprised of all children of a page:

<ul className="nav"> { page.children.map(childObj => <li key={ childObj.id() }> <Scrivito.LinkTag to={childObj}> { childObj.get("title") } </Scrivito.LinkTag> </li> ) } </ul>

Pass params:

<Scrivito.LinkTag to={Scrivito.Obj.root()} params={{ highlight: "navigation" }}> Back to homepage </Scrivito.LinkTag>

Pass an onClick property to call a method when the link is clicked:

function sayHello(event) { alert('Hello') // After the alert, the redirection is performed } <li> <Scrivito.LinkTag to={obj} onClick={(event) => this.sayHello(event)}> { obj.get("title") } </Scrivito.LinkTag> </li>

Suppress the redirection using preventDefault:

function sayHello(event) { event.preventDefault() // No redirection takes place console.log(event.defaultPrevented) // true alert('Hello') } <li> <Scrivito.LinkTag to={obj} onClick={(event) => this.sayHello(event)}> { obj.get("title") } </Scrivito.LinkTag> </li>