nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Hub Site - Page table of contents or link to headings h1

BrittanyOBaker

Hello, it would be useful to have a page 'Table of Contents' on a ArcGIS Hub Site Page (as a preconfigured layout widget card).

In some use cases we are interested in having all the information on a single page (not multiple pages), but have no way for the user to easily navigate other than scrolling down the page.

In an attempt to make my own Table of contents, at the moment there is no way to automatically link to headings (i.e., h1 or Banner) in a single page, but there is a way to link to gallery cards (if enable sharing is on), which can be embedded in buttons in a text card, or HTML banchors. After publishing I captured the links to the cards (Share this card option below each gallery), and was able to use calcite tiles (or buttons) to link to the shared gallery cards. This is a useful workaround to jump a user to a certain section, but it jumps below the headings. A disadvantage is that the section must have a gallery card for this to work, or HTML skills to use anchors.

Clicking on one of the buttons above in the page, jumps the user down to the gallery

Find more posts tagged with

sites

pages

Templates

Status: Open

Comments

DataOfficer

Hi,

In order to jump to headers/sections have you tried using html anchors? E.g. https://marcom.wwu.edu/how-create-anchor-jump-link

BrittanyOBaker

Hi @DataOfficer, great suggestion thank you! This does resolve the issue as a workaround.

It would be great if Esri could build this functionality automatically (as seen in the gallery card) in as part of every card/template so I don't have to set up each one individually.

For anyone wanting to follow the workaround:

Edit your text box (edit in HTML).
Add your anchor (i.e., your HTML might look like this, just replace heading1 with your actual heading text: <div class="banner-heading" id="heading1">Heading1</div>
Go to your button or calcite tile in your 'table of contents' section.
Edit in HTML. (i.e., your HTML might look like this, : <h2 style="font-family: "Instrument Sans", "Avenir Next"; color: rgb(235, 242, 241); font-size: var(--font-size-h2);">Contents</h2>
<div>
<div style="margin-top:1rem;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0.5rem;">
<calcite-tile style="--calcite-tile-description-text-color: #011c22; --calcite-tile-heading-text-color: #011c22;" heading="Heading1" href="https://NAME.hub.arcgis.com/#heading1" description="About Heading1 here" icon="projects"></calcite-tile>
</div>
</div>
Repeat for every heading you wish to link, add the anchors to the headings and then add a calcite tile before </div> to add a new linking box on screen for your contents.

DataOfficer

@BrittanyOBaker I'm glad that helped