CMS Relative Links

A hack to allow relative links in Webflow

CMS Link Fixup

The Problem

Webflow's CMS feature has a significant limitation in that the CMS knows nothing about its containing site.

As a result of this design gap, it's currently not possible to link from a CMS collection item to a known page in your site, in the same way you can link within the designer.

CMS's have a Link field type, however a second limitation prevents the use of relative paths, which means you cannot even link to e.g. /about/.

The Hack

To get around this, we use the hostname self in our absolute links, and then fix-up these links in the published site so that they are relative links.

  • + No tagging required.
  • + Use the CMS's standard Link field
  • > Simply prefix your internal links, e.g. /about becomes https://self/about.

DEMO

Below is a collection list showing links from the CMS. Some of these are start with https://self which we fix-up and correct to relative paths.

Click the links below to see their behavior.

Eaque Sequi Sit

Relative link to home

Fugit Et Officiis

Relative link

Omnis Atque Qui Nisi

Quisquam Soluta

How to implement

Click the View in Webflow's Designer button at the top of this page, to explore the page design.

To add this capability to your own site, see Sygnal Webflow Utils (WFU) documentation here.

See the Pen Untitled by Michael Wells (@memetican) on CodePen.