<!--
Light: <nav class="au-inpage-nav-links">
Dark: <nav class="au-inpage-nav-links au-inpage-nav-links--dark">
-->
<nav class="au-inpage-nav-links" aria-label="in page navigation">
<h2 class="au-inpage-nav-links__heading">Contents</h2>
<ul class="au-link-list">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
<h2 class="au-inpage-nav-section au-display-sm">
Section 1 page headline
<a id="section1" class="au-inpage-nav-section-link" href="#section1">Link to section</a>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2 class="au-inpage-nav-section au-display-sm">
Section 1 page headline
<a id="section2" class="au-inpage-nav-section-link" href="#section1">Link to section</a>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
/*
Light: <AUinpageNavLinks>
Dark: <AUinpageNavLinks dark>
*/
import { AUinpageNavLinks, AUinpageNavSection } from '@gold.au/inpage-nav';
<AUinpageNavLinks sections={[
{
link: 'section1',
title: 'Section 1',
},
{
link: 'section2',
title: 'Section 2',
},
]} />
<AUinpageNavSection title="Section 1 headline" link="section1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</AUinpageNavSection>
<AUinpageNavSection title="Section 2 headline" link="section2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</AUinpageNavSection>
