ontario-in-page-navigation

Use in-page navigation (table of contents) to help users understand and navigate long, single-page content.

Usage guidance

Please refer to the Ontario Design System for current documentation guidance.

If no list item content is provided in the default slot, the component renders the heading and skip link without navigation links and logs a console warning to help authors catch the missing items.

Accessibility guidance

• Match each navigation link label to the destination section heading text.
• Ensure each link href hash matches an existing section id.
• Place the component before the main section content it references.
• Select headingLevel (h2/h3/h4) based on surrounding heading hierarchy.

Examples

Default usage with child items:

HTML

<ontario-in-page-navigation heading="On this page">
	<ontario-in-page-navigation-item label="Overview" href="#overview"></ontario-in-page-navigation-item>
	<ontario-in-page-navigation-item label="Eligibility" href="#eligibility"></ontario-in-page-navigation-item>
	<ontario-in-page-navigation-item label="Apply" href="#apply"></ontario-in-page-navigation-item>
</ontario-in-page-navigation>

React

<OntarioInPageNavigation heading="On this page">
	<OntarioInPageNavigationItem label="Overview" href="#overview"></OntarioInPageNavigationItem>
	<OntarioInPageNavigationItem label="Eligibility" href="#eligibility"></OntarioInPageNavigationItem>
	<OntarioInPageNavigationItem label="Apply" href="#apply"></OntarioInPageNavigationItem>
</OntarioInPageNavigation>

Angular

<ontario-in-page-navigation heading="On this page">
	<ontario-in-page-navigation-item label="Overview" href="#overview"></ontario-in-page-navigation-item>
	<ontario-in-page-navigation-item label="Eligibility" href="#eligibility"></ontario-in-page-navigation-item>
	<ontario-in-page-navigation-item label="Apply" href="#apply"></ontario-in-page-navigation-item>
</ontario-in-page-navigation>

Slotted list items (<li><a href="#section-id">Label</a></li>) are the standard way to author navigation links.

Smooth scroll enabled (default):

<ontario-in-page-navigation smooth-scroll="true"></ontario-in-page-navigation>

Smooth scroll disabled:

<ontario-in-page-navigation smooth-scroll="false"></ontario-in-page-navigation>

Skip-link target customization:

<ontario-in-page-navigation skip-link-target="main-content"></ontario-in-page-navigation>

<main id="main-content"></main>

Slot-based composition:

<ontario-in-page-navigation>
	<ontario-in-page-navigation-item label="Overview" href="#overview"></ontario-in-page-navigation-item>
	<ontario-in-page-navigation-item label="Eligibility" href="#eligibility"></ontario-in-page-navigation-item>
</ontario-in-page-navigation>

Overview

Ontario In-Page Navigation presents a heading and ordered list of links that help users navigate long single-page content.

For component guidance, see:

• https://designsystem.ontario.ca/components/detail/in-page-navigation.html
• https://designsystem.ontario.ca/developer-docs/components/ontario-in-page-navigation/

Properties

Property	Attribute	Description	Type	Default
heading	heading	Optional heading text. If omitted, the heading is resolved from i18n.	string | undefined	undefined
headingLevel	heading-level	Heading level used for the component heading.	"h2" | "h3" | "h4"	'h2'
language	language	Language used for translated defaults.	"en" | "fr" | undefined	undefined
noTopBorder	no-top-border	Removes the top border from the navigation container.	boolean | undefined	false
skipLinkTarget	skip-link-target	Skip link target id (without #) or anchor (with #).	string | undefined	'skip-to-main'
smoothScroll	smooth-scroll	Enables smooth scrolling and hash updates for in-page links.	boolean | undefined	true

---

Built with StencilJS