# Anchor

## Examples


### Basic

`Anchor` can be added to any `Heading` level.

```typescript
import React from 'react';

import Anchor from '@splunk/react-ui/Anchor';
import Heading from '@splunk/react-ui/Heading';
import P from '@splunk/react-ui/Paragraph';
import Prose from '@splunk/react-ui/Prose';


function Basic() {
    return (
        <Prose>
            <Heading level={1}>
                <Anchor name="Heading 1">Heading 1</Anchor>
            </Heading>
            <P>This is the content below Heading 1.</P>
        </Prose>
    );
}

export default Basic;
```




## API


### Anchor API

`Anchor` is a utility component used to add a fragment link to an element.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  |  |
| elementRef | React.Ref<HTMLAnchorElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| name | string | yes |  | The name to give to the anchor for the URL fragment. |