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

components/AnchorLinks/AnchorLinks.js
<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

components/AnchorLinks/AnchorLinks.js
<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