Create tabs within each page of hub site?

[Veronicampbell]

Hello, I am creating a hub site with multiple pages, with different section topics within each. Is there a way to create a set of tabs at the top of each page to allow the user to see all header/topics covered in the page (once the page clicked on), and be able to click the title to scroll to that portion within the page? Thank you!

[Alex-Santos · Accepted solution]

Hi, you could use the toplinks class to have the page scroll down to a section of the page. At the top of the your page in a text card place the top links (tabs):

<div>
<p style="text-transform:; text-align: center" align="center">
<a class="toplinks" style="white-space: nowrap" href="#section1">Section 1</a>&nbsp;|&nbsp;
<a class="toplinks" style="white-space: nowrap" href="#section2">Section 2</a>&nbsp;|&nbsp;
<a class="toplinks" style="white-space: nowrap" href="#section3">Section 3</a>&nbsp;|&nbsp;
<a class="toplinks" style="white-space: nowrap" href="#section4">Section 4</a>
</p>
</div>

I put spaces with a | character to space the links. Then place their matching id tags within the same text card as your section headers. For example section 1,

<a id="section1" style="position: relative; top: -120px;" aria-label="section1"></a>

<h2 style="text-align: center;">Section 1 of My Page</h2>

I did a relative top position for ours but you could remove or test different px sizing. Your resulting URL would look something like https://www.myhubsite.com/pages/yourpage#section1