Text link#

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#

• Figma
• Source code
• Docs code

import { Link, Anchor } from '@dnb/eufemia'
render(<Anchor href="/web/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 'react-router'

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>

Security#

For security reasons, the Anchor removes href and to values that use a script-executing protocol (javascript: or vbscript:), including obfuscated variants such as java\tscript:. This prevents cross-site scripting (XSS) when untrusted input is passed to these properties; the element then renders without a link target. Other protocols, such as data: and blob:, are left untouched.

Related components#

Text link is part of the Navigation category. More components in this category:

• Breadcrumb — to show where someone is and let them move back up the path.
• Infinite scrolling — to load more content automatically as people scroll.
• Pagination — to split long content into pages or load more content as people move through it.
• Sidebar menu — for persistent navigation with sections and nested groups.
• Step indicator — to show progress through a process with several steps.
• Tabs — to let people switch between related views on the same page.

Demos#

Basic usage#

The basic use of <Anchor> is identical to the <a> tag.

<P>
  This is a regular paragraph with a{' '}
  <Anchor href="https://dnb.no/">link to a website</Anchor> in the middle
  of some text.
</P>

With icon#

Icons can be added with the icon and iconPosition properties. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).

On dark surface#

Use Section or Theme.Context with surface="dark" to provide dark surface context to supporting components.

Additional Anchor helper classes#

To force a specific state of style, use the following classes to do so:

Anchor modifier properties#

Links in running text need the underline, so they can be told apart from the surrounding text without relying on color. Use noUnderline only for links that stand on their own, such as in navigation.

Anchor with target="_blank"#

If the link opens a new window it will automatically get an icon to indicate this.

Unless the href starts with mailto:, tel: or sms:.

Anchor in headings#

Anchor in Section#

<Section
  innerSpace={{
    block: 'large',
  }}
>
  <Anchor className="dnb-anchor--no-underline" href="https://dnb.no/">
    Anchor in Section without underline
  </Anchor>
</Section>