AnchorLinks

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

Small

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>

Small

components/AnchorLinks/AnchorLinks.js
<AnchorLinks small>
  <AnchorLink>Small link 1</AnchorLink>
  <AnchorLink>Small link 2</AnchorLink>
  <AnchorLink>Small link 3</AnchorLink>
</AnchorLinks>

AnchorLinks Props

propertypropTyperequireddefaultdescription
childrennode
smallboolDisplay small font size

AnchorLink Props

propertypropTyperequireddefaultdescription
childrennode
tostringprops.childrenBy default, the AnchorLink slugifys the children you pass in. Use the to prop to override this target.
Edit this page on GitHub
Previous
Components: Accordion
Next
Components: ArtDirection