Skip to main contentGatsby theme Carbon

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

NormalSmall

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>

Props

AnchorLinks
propertypropTyperequireddefaultdescription
childrennode
smallboolDisplay small font size
AnchorLink
propertypropTyperequireddefaultdescription
childrennode
tostringprops.childrenBy default, the AnchorLink slugifys the children you pass in. Use the to prop to override this target.