Skip to content
Links field for Kirby.
Branch: master
Clone or download


Kirby 3 Field for links of any kind - external, page, file, email, phone. Has settings for text, popup true/false, and hash. Original plugin is this, created by Thomas Günther.

The plugin uses the native Kirby fields for pages, files, url, email, and tel:

usage demo

If used inside a structure field, link fields get a nice preview. Links to pages and files get the native page/file preview:

links in structure field


composer require oblik/kirby-link-field

...or check out other plugin installation methods.


Add a field and set its type to link:

    type: link
    label: Link

To define what link types you want, use options. Possible values are url, page, file, email, and tel:

    type: link
    label: Link
      - page
      - url

By default, you can also specify link text, popup true/false, and hash. You can disable those options or change their appearance by using the settings value:

    type: link
    label: Link
        width: 1/3
        label: External Link
        help: Open link in a new tab?
        width: 2/3
      hash: false

To disable settings altogether, set:

settings: false


To render the links, use the provided toLink() method. It returns an instance of the Link class, or null if the link is invalid.

Let's say you have a field with the following values:


type: page
value: home
text: My Text
popup: true
hash: heading-1
$link = $page->myfield()->toLink();


Returns the link URL, including the hash:


Note: For email and tel links, the value is null since they're not actual links.


Returns link href:


If the link type is email, the href has mailto:. If it's tel, it has tel:.

Note: This is automatically called when you try to convert the class to string, meaning that:

echo $page->myfield()->toLink(); the same as:

echo $page->myfield()->toLink()->href();


Returns the link attributes, merged with the optional $args:

href="http://localhost/home#heading-1" target="_blank"


Returns a full <a> tag with merged attributes from the optional $args:

<a href="http://localhost/home#heading-1" rel="noopener noreferrer" target="_blank">My Text</a>


Returns the link text, if present, or an empty string.


Returns either the link text, page title, file title, filename, or finally the value. Used to generate the link text for the tag() method.


An instance of the Kirby\Http\Uri class. It contains the parts of $link->url(). You can also use its methods on the Link instance. For example:

echo $link->parts->host(); the same as:

echo $link->host();


Run npm i to install Webpack and all other dev dependencies.


  • npm run dev - start Webpack in dev mode with watch
  • npm run build - build the source

Note: Since Babel would have been an overkill for such a small project, please write JavaScript in ES5.

You can’t perform that action at this time.