Oleg Isonen
2e4efb52f9
## Summary Update the Link documentation to match the current code. The Builder uses `_self`, `_blank`, `_parent`, and `_top` as the Link `target` values. The old docs described these as `Self`, `Blank`, `Parent`, and `Top`, which could make setting a new-tab link confusing. ## Changes - Document the four current target values. - Explain that `_blank` opens a link in a new tab or window. - Remove the outdated Target screenshot. - Checked the rest of `docs/` for the same outdated target names; no other related occurrences were found. ## Verification - `git diff --check` passed. - Confirmed the values in `packages/sdk-components-react/src/__generated__/link.props.ts` and `packages/sdk-components-react/src/create-link.tsx`. - Checked that the docs file and navigation file exist. - `pnpm exec oxfmt --check docs/university/core-components/link.md` did not run because the Markdown file is excluded by the formatter configuration. ## Checklist - [x] Review the current Builder implementation. - [x] Review the authoritative docs page. - [x] Check for similar outdated documentation. - [x] Review documentation impact: this PR updates the affected page; no other docs need changes. - [ ] Merge the pull request.
4.7 KiB
description
| description |
|---|
| Link lets you link to websites, pages, emails, and more from text, images, and more. |
🔗 Link
See MDN: <a>
{% embed url="https://www.youtube.com/watch?v=XPzFZ67zRrU" %}
How to use the Link component
The "Link Component" can be found in Components > General, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel.
You can convert anything into a link by wrapping it inside the Link component, including text and images. These links can direct users to different pages within your site or lead to external resources, including other websites, downloadable files, or email addresses.
How to customize a Link instance's properties
You can customize the properties of a Link instance by selecting it and going to "Settings." Here is an overview of each property:
Href
The "href" property determines what the Link instance will lead to, such as a URL, page, phone, attachment, or email address.
-
URL: In its most common form, the "href" property references a URL, linking to another website or page.
-
Page: You can link to all of your pages within your site here. You can also link to specific sections within those pages. To link to a section on a page, first go to the section and fill out the
IDfield in Settings. Then go back to the link, select the page, and then in the next dropdown select theIDyou just created. Like this:
First add the ID to the section you want to link to
Then add a page link and select the section.
-
Email: When you specify an email address as the 'href' value, the link opens the user's default email client (such as Gmail) with the designated email address pre-filled.
-
Phone: If you set the "href" property to a phone number, the link becomes a prompt for users to initiate phone calls directly from their devices.
-
Attachment: You can also link to downloadable attachments such as PDFs, documents, or media files, allowing users to initiate file downloads with one click.
Target
The target property controls where the link opens. Choose one of these values:
_self: Opens the link in the same tab. This is the default._blank: Opens the link in a new tab or window._parent: Opens the link in the parent browsing context. This is mainly useful inside nested frames._top: Opens the link in the top-level browsing context, replacing any frames.
To open a link in a new tab, set Target to _blank.
Prefetch
The "Prefetch" property enables near-instant page transitions by preloading linked pages before the user clicks. This dramatically improves perceived navigation speed.
- Intent: The browser loads the destination page when the user hovers over the link. This is ideal for most links as it balances performance with resource usage.
- Render: The browser loads all destination pages as soon as the current page renders. Best for simple pages or funnels with very few links.
- Viewport: The browser loads the destination page when the link enters the user's viewport. Good for links that appear below the fold.
For most websites, use "Intent" or "Viewport" to provide fast navigation without overloading the browser with pages to preload.
Wrapping Components in Links
You can add any Webstudio component inside a Link element to make it clickable — images, videos, text, buttons, or even custom HTML embeds. Simply drag the component into the Link or wrap existing content by selecting it and using the Link component.
How to style the current page state
When using links for navigation and wanting to highlight the current page, the link component has a "Local Link" state in every style source.
Related
- Button – Clickable action buttons
- Element – Generic HTML elements
- Navigation Menu – Navigation with dropdowns