Directus Custom Link JSON Interface

Directus interface extension for json fields that manages repeatable link objects with:

• Internal or external link type
• Internal custom path or dynamic collection-based URL (id + slug)
• External custom URL
• Target (_self / _blank)
• Title
• Multiple rel values
• Custom query parameters
• URL and required-field validation

Compatibility

• Directus 11.17.2 and newer within major 11 (^11.17.2)

Install

npm install
npm run build

Copy this extension folder into your Directus extensions directory (folder name should start with directus-extension-), then restart Directus.

Field Setup

1. Create a field with type JSON.
2. Choose interface Custom Link (JSON).
3. Configure interface options:

• Allowed Internal Collections
• Selectable rel Values
• Optional limits/defaults (Max Links, Default Target, etc.)

Global Settings (Singleton)

For centralized defaults across many fields:

1. Create a singleton collection (for example link_interface_settings).
2. Add fields with the exact keys below:

• maxLinks
• itemFetchLimit
• requireTitle
• requireHref
• defaultTarget
• defaultInternalPathTemplate
• internalCollections (JSON)
• externalCollections (JSON)
• relChoices (JSON)

3. In each field interface config:

• Enable Use Global Settings
• Set Global Settings Collection
• Keep Override Global For This Field disabled to use global values
• Enable Override Global For This Field when a specific field needs custom behavior

Stored JSON Shape

The field stores an array of link objects:

[
  {
    "type": "internal",
    "title": "Product Detail",
    "target": "_self",
    "rel": ["nofollow"],
    "queryParams": [
      { "key": "ref", "value": "homepage" }
    ],
    "internal": {
      "mode": "dynamic",
      "customPath": "",
      "collection": "products",
      "itemId": "42",
      "slugField": "handle",
      "slugValue": "air-conditioner",
      "titleValue": "Air Conditioner",
      "pathTemplate": "/{collection}/{id}/{slug}"
    },
    "href": "/products/42/air-conditioner?ref=homepage",
    "errors": []
  }
]

Notes

• href is resolved by the interface for preview and output convenience.
• errors contains current validation errors for each link entry.
• Output includes only the active link branch (internal for internal links, external for external links).
• Dynamic internal links default to handle and support slug (fallback), or any custom field via slugField.
• External links are URL-only (for example https://google.com) and do not use collection item selection.
• If you prefer to persist only selected properties, adapt toLinkValue() in src/interface.vue.