#Anchor (Text Link)

#Import

import { Anchor } from '@dnb/eufemia'

#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>

#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 props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).

#Additional Anchor helper classes

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

#Anchor modifier props

• noAnimation - No Animation
• noStyle - No Style
• noHover - No Hover
• noUnderline - No Underline

#Anchor with target="_blank"

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

Unless the href contains :mailto, :tel or :sms.

#Anchor in headings

#Anchor in Section

<Section spacing>
  <Anchor className="dnb-anchor--no-underline" href="https://dnb.no/">
    Anchor in Section without underline
  </Anchor>
</Section>