Skip to content
Home

Anchor (Text Link)

Info
Demos
Properties

Import

import { Anchor } from '@dnb/eufemia'

Description

The Anchor, also known as Link, is used to navigate from one page to the next HTML page.

Relevant links

import { Link, Anchor } from '@dnb/eufemia'
render(<Anchor href="/uilib/components/anchor">Accessible text</Anchor>)

Combine a Link with an Anchor

You can combine a meta framework link with the Anchor. This way, all the framework-provided features will still work, as well as the behavior of the Eufemia Anchor.

import Anchor from '@dnb/eufemia/components/Anchor'
import { Link } from 'gatsby'


render(
  <App>
    <Anchor element={Link} to="/path">
      Link
    </Anchor>
  </App>
)

Blank target

NB: If you only use a vanilla HTML anchor element including target="_blank", then you have to ensure you add a title attribute that includes Opens a new Window or as part of the text:

<a
  title="Opens a new Window"
  target="_blank"
  href="https://"
  class="dnb-anchor"
>
  text (opens in new window)
</a>