Components

Anchor Link

An Anchor Link component to navigate to internal pages and external URLs.

Usage

The Anchor Link component is a wrapper around the HTML anchor <a> tag, providing a consistent way to navigate between pages in your Dev Portal.

The Anchor Link component styles are inherited from the Portal's native anchor tag styles and will inherit styles from any CSS custom property or global CSS overrides. To use the Anchor Link component in your Markdown and MDC files, you can use the following component tag:

This is a link

::a
---
href: "/components/button"
display: "inline"
---
This is a link
::

A Component Props

href

The URL or absolute path for the link to navigate to when clicked.

display

The display type of the component. Accepts the CSS values for 'display'.

target

Where to display the linked URL, as the name for a browsing context. Typically one of '_blank' (usually a new tab), '_parent', '_self', or '_top'.

rel

A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.

You can even use the Anchor Link component inside other components, such as an Alert:

View thealert component docsfor more information.

::alert
---
appearance: "success"
show-icon: true
---
View the
  ::a
  ---
  href: "/components/alert"
  ---
  alert component docs
  ::
for more information.
::

Props

href

The URL or absolute path for the link to navigate to when clicked.

Type: string
Default: ''

The href prop can accept different types of values:

Provide an absolute path to easily allow navigating across your Dev Portal: /components/button
Provide a full URL to navigate to another website: https://konghq.com (you may also want to set target="_blank" to open in a new tab)
Provide a hash as the href to scroll to an element with an id attribute on the same page: #slots