Skip to content

Description

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

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>,
)

Anchor hash

Some browsers like Chrome (behind a flag) does still not support animated anchor hash clicks when CSS scroll-behavior: smooth; is set. To make it work, you can provide the scrollToHashHandler helper function to the Anchor:

import Anchor, {
scrollToHashHandler,
} from '@dnb/eufemia/components/Anchor'
render(
<App>
<Anchor href="/path#hash-id" onClick={scrollToHashHandler}>
Link
</Anchor>
<div id="hash-id">element to scroll to</div>
</App>,
)

Or with the scrollToHash helper function:

import Anchor, { scrollToHash } from '@dnb/eufemia/components/Anchor'
scrollToHash('/path#hash-id')
render(
<App>
<div id="hash-id">element to scroll to</div>
</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 a part of the text:

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