Skip to content
Home

Anchor (Text Link)

Info
Demos
Properties

Properties

PropertiesDescription
element(optional) define what HTML or React element should be used (e.g. element={Link}). Defaults to semantic a element.
href(optional) relative or absolute url.
to(optional) use this prop only if you are using a router Link component as the element that uses the to property to declare the navigation url.
target(optional) defines the opening method. Use _blank to open a new browser window/tab.
targetBlankTitle(optional) the title shown as a tooltip when target is set to _blank.
tooltip(optional) Provide a string or a React Element to be shown as the tooltip content.
icon(optional)Primary Icons can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements.
iconPosition(optional)left (default) or right. Places icon to the left or to the right of the text.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.

Router Link

You can make use of the element property in combination with the to property.

import { Link } from 'gatsby'


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

Anchor hash

Some browser 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(
  <>
    <Anchor href="/path#hash-id" onClick={scrollToHashHandler}>
      {children}
    </Anchor>


    <div id="hash-id">element to scroll to</div>
  </>
)