You can use rich text tags to add hyperlinks to text for the Editor UI or at runtime. For demonstration purposes, this example shows how to add hyperlinks in a custom Editor window.
This example creates a custom Editor window with three hyperlinks. The first two links are created with <link> tags that use link IDs. The third link uses an <a> tag with an href attribute to define the destination.
The third link is created with an <a> tag that uses the href attribute to define the link’s destination.
The <link> tag is a rich text tag that you can use to create links in UI Toolkit. Use the <link> tag if you need to create many links or want to define custom link behavior with C# scripts.
This example uses the following events to define the <link> tag logic:
Note: Those events are experimental, so they’re still in the process of becoming stable enough to release.
You can find the completed files that this example creates in this GitHub repository.
This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:
To create a custom Editor window with hyperlinks with UI Toolkit, follow these steps:
Create a project in Unity with any template.
Right-click in the Assets folder, and select Create > UI Toolkit > Editor Window.
In UI Toolkit Editor Window Creator, enter LinkTag in the C# field.
Select Confirm. This creates an Editor folder with the C# script, UXML, and USS files for your custom window.
Double-click LinkTag.uxml to open it in the UI Builder.
In the UI Builder, select the first label.
Replace the Text field with the following content:
Link to <link="1"><color=#40a0ff><u>Unity</u></color></link>
Link to <link="2"><color=#40a0ff><u>UITK Discussions</u></color></link>!
Enable Enable Rich Text.
Select Add Style Class to List.
Enter link and press the Enter key. This adds a link class to the first label.
Select the second label, and replace the Text field with the following content:
Link to <a href="https://www.google.com/"><u>Google</u></a> using <noparse><a></noparse> tag.
Enable Enable Rich Text.
Save and close the UI Builder.
Replace the content of LinkTag.uss with the following:
Label {
font-size: 75px;
}
/*Turn the mouse pointer into a hand pointer when you hover over the link text.
Note that the cursor override for the link value doesn’t work at runtime.*/
.link-cursor {
cursor: link;
}
Replace the content of LinkTag.cs with the following:
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEngine.UIElements.Experimental;
public class LinkTag : EditorWindow
{
[SerializeField]
private VisualTreeAsset m_VisualTreeAsset = default;
[MenuItem("Window/LinkTag Sample")]
public static void ShowExample()
{
LinkTag wnd = GetWindow<LinkTag>();
wnd.titleContent = new GUIContent("LinkTag Sample");
}
readonly string linkCursorClassName = "link-cursor";
Dictionary<int, string> m_UrlLookup;
Label linkLabel;
public void OnEnable()
{
// Use the dictionary to map link IDs to URLs.
// The link ID is the number in the link tag, and the URL is the destination.
// This is a simple example, in a real application you can define a more complex structure.
m_UrlLookup = new Dictionary<int, string>()
{
{ 1, "https://www.google.com/" },
{ 2, "https://discussions.unity.com/" }
};
}
public void CreateGUI()
{
VisualElement uxml = m_VisualTreeAsset.Instantiate();
rootVisualElement.Add(uxml);
linkLabel = rootVisualElement.Q<Label>(className: "link");
linkLabel.RegisterCallback<PointerDownLinkTagEvent>(HyperlinkOnPointerDown);
linkLabel.RegisterCallback<PointerUpLinkTagEvent>(HyperlinkOnPointerUp);
linkLabel.RegisterCallback<PointerMoveLinkTagEvent>(HyperlinkPointerMove);
linkLabel.RegisterCallback<PointerOverLinkTagEvent>(HyperlinkOnPointerOver);
linkLabel.RegisterCallback<PointerOutLinkTagEvent>(HyperlinkOnPointerOut);
}
void HyperlinkOnPointerOver(PointerOverLinkTagEvent _)
{
linkLabel.AddToClassList(linkCursorClassName);
}
void HyperlinkPointerMove(PointerMoveLinkTagEvent _) { }
void HyperlinkOnPointerOut(PointerOutLinkTagEvent _)
{
linkLabel.RemoveFromClassList(linkCursorClassName);
}
void HyperlinkOnPointerDown(PointerDownLinkTagEvent _) { }
void HyperlinkOnPointerUp(PointerUpLinkTagEvent evt)
{
var linkID = int.Parse(evt.linkID);
if (m_UrlLookup.TryGetValue(linkID, out var url))
Application.OpenURL(url);
}
}
To verify that the link works, follow these steps:
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.