Gatsby 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

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>

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

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.

Components: Accordion

Components: ArtDirection