The

<AnchorLinks>

and

<AnchorLink>

components are used together to display a list of anchor links for navigation within the page. Use these to link to

<h2>

<h3>

anywhere within your page. As long as the anchor link text and header text matches the link will work.

For most pages, we recommend starting with a

PageDescription

followed by

AnchorLinks

if the content is long enough.

Example

Normal

Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7

Small

Small link 1
Small link 2
Small link 3

Code

Normal

<AnchorLinks>
  <AnchorLink>Link 1</AnchorLink>
  <AnchorLink>Link 2</AnchorLink>
  <AnchorLink>Link 3</AnchorLink>
  <AnchorLink>Link 4</AnchorLink>
  <AnchorLink>Link 5</AnchorLink>
  <AnchorLink>Link 6</AnchorLink>
  <AnchorLink>Link 7</AnchorLink>
</AnchorLinks>
Copy to clipboard

Small

<AnchorLinks small>
  <AnchorLink>Small link 1</AnchorLink>
  <AnchorLink>Small link 2</AnchorLink>
  <AnchorLink>Small link 3</AnchorLink>
</AnchorLinks>
Copy to clipboard

Props

AnchorLinks

| property | propType | required | default | description | | -------- | -------- | -------- | ------- | ----------------------- | | children | node | | | | | small | bool | | | Display small font size |

AnchorLink

| property | propType | required | default | description | | -------- | -------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------- | | children | node | | | | | to | string | | props.children | By default, the

AnchorLink

slugifys the children you pass in. Use the to prop to override this target. |

Edit this page on GitHub

Components: Accordion

Components: ArtDirection