#Anchor (Text Link)

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

#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

#Anchor states

<Example>
  <Anchor href="/uilib/components/anchor">Default Style</Anchor>
</Example>
<Example>
  <Anchor href="/uilib/components/anchor" className="dnb-anchor--hover">
    Hover Style
  </Anchor>
</Example>
<Example>
  <Anchor href="/uilib/components/anchor" className="dnb-anchor--active">
    Active Style
  </Anchor>
</Example>
<Example>
  <Anchor href="/uilib/components/anchor" className="dnb-anchor--focus">
    Focus Style
  </Anchor>
</Example>

#Additional Anchor helper classes

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

#Anchor modifiers

• .dnb-anchor--no-animation No Animation
• .dnb-anchor--no-style No Style
• .dnb-anchor--no-hover No Hover
• .dnb-anchor--no-underline No Underline

#Anchor with icons

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

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