A text link is the most basic element of navigation. It allows you to jump from one page to another, either internally in one site, or externally to other sites. Use text link to present text links in page content or inside other HTML theme elements where you need to present text links (e.g., breadcrumbs, table of content, etc.)

A text link doesn’t get updated automatically when the target page url it points to changes. For this reason, when you need to connect site pages using text link, avoid including a text link directly. Instead, use a navigation strategy based on page categories, where you can link them using category index html presentation template, which internally uses text link to present links.

A text link allows you to link sections in the same page by specifying only the name of the section you want to produce a link to.

Presentation template

Text link presentation template is defined in the _includes/base/link.html file.

Text link presentation template uses Bootstrap colored link classes for consistent presentation. When you include text link presentation template in a page, you can customize it passing arguments, as described in “Configuration arguments” section.

Light background

Text link presentation template example on light background:

{% assign colors = "primary, secondary, info, success, warning, danger, light, dark" | split: ", " %}
<div class="d-flex flex-row flex-wrap justify-content-center mb-3 p-3 bg-light rounded">
{%- for color in colors %}
<div class="p-2">{% include base/link.html name="Presentation template" color=color %}</div>
{%- endfor %}
</div>

Dark background

Text link presentation template example on dark background:

{% assign colors = "primary, secondary, info, success, warning, danger, light, dark" | split: ", " %}
<div class="d-flex flex-row flex-wrap justify-content-center mb-3 p-3 bg-dark rounded">
{%- for color in colors %}
<div class="p-2">{% include base/link.html name="Presentation template" color=color %}</div>
{%- endfor %}
</div>

Configuration files

None.

Configuration variables

None.

Configuration arguments

Text link configuration arguments are described in the following table:

Name	Description
name	Link name.
url	Link location. It can be relative or absolute. Relative links are concatenated to site.url and site.baseurl variables. Absolute links start with https:// or http:// and are set exactly as they were passed. When no url argument is provided, text link presentation template produces an anchor link using the link name as reference to build the link (useful to link sections in the same page where the link was included).
class	Link class used to present text link. Possible values can be any Bootstrap class. When you provide this argument, it overrides the text link default presentation template. Use this option to create text link buttons.
role	Link role. By default the link role is not added to link elements. It is mostly used for presentation purposes in HTML elements that use text link internally.
color	Link color. Possible values can be any Bootstrap color class (e.g., primary, secondary, info, warning, danger, light, dark).
icon	Icon class used in link. By default no icon class is used. Possible options to use use here are limited to fontawesome freely distributed icons.
icon_position	Icon position. Possible values are start (default) or end.

Including text link with icon

{% include base/link.html name="Presentation template" icon="fa-solid fa-arrow-left" %}

{% include base/link.html name="Presentation template" icon="fa-solid fa-arrow-right" icon_position="end" %}

Including text link as button

{% include base/link.html name="Presentation template" class="btn btn-primary" icon="fa-solid fa-arrow-right" icon_position="end" %}

Related topics