C&C Docs
Log in
Pages

Links into a region — cnc-link and $nav

A cnc-link with targets does not leave the page: it names a region and the block to show there. The region is a <cnc-block name="detail">; the link writes ?__detail=<href> into the address, and the block swaps in place. There is no page load, a reload keeps the region, and Back steps through it.

Pick a planet.

How it is written

<cnc-link
  href="/links/planet?slug=mars"
  :targets="[{ name: 'detail', href: '/links/planet?slug=mars' }]"
>Mars</cnc-link>

<cnc-block name="detail">
  <p>Pick a planet.</p>   <!-- shown until something names the region -->
</cnc-block>

From code: $nav

Browser code moves the same region through $nav. Each button below changes the address, and the region above follows it. 

// One region:
this.$nav.targets.detail.href = '/links/planet?slug=venus'
// Several regions in one step (one Back entry):
this.$nav.load({ targets: { detail: '/links/planet?slug=mars' } })
// Empty the region again:
this.$nav.targets.detail.href = null