Skip to main content
Version: v9.1.0

ontario-in-page-navigation-item

Use in-page navigation items to create the individual links inside an in-page navigation list.

This component is designed to be used as a child of ontario-in-page-navigation. It renders a single in-page anchor link and keeps the item styling consistent with the Ontario Design System.

If you need router-specific link markup, you can provide custom content through the default slot. When slot content is supplied, it takes precedence over the label and href props.

Usage guidance​

Please refer to the Ontario Design System in-page navigation guidance for the latest documentation.

Configuration​

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the item component can be added directly into the project's code, and can be customized by updating the properties outlined here. Pass both label and href for the standard pattern. The component warns if either value is missing.

When no default slot content is provided and either label or href is omitted, the component still renders an anchor for layout consistency and logs a console warning to help authors correct the configuration.

Examples​

  1. Standard item Demonstrates the basic required configuration.
<ontario-in-page-navigation-item label="Eligibility" href="#eligibility"></ontario-in-page-navigation-item>
  1. Item with long label Demonstrates wrapping behaviour.
<ontario-in-page-navigation-item
	label="What to include in your contract before completing your purchase"
	href="#contract"
></ontario-in-page-navigation-item>
  1. Current (active) item Demonstrates the current section state.
<ontario-in-page-navigation-item
	label="Eligibility"
	href="#eligibility"
	isCurrent="true"
></ontario-in-page-navigation-item>

This applies aria-current="location" to the rendered anchor.

  1. Slot override pattern When a router link is needed, use the default slot and supply the full anchor/link element.
<ontario-in-page-navigation-item>
	<a class="ontario-in-page-navigation-item__link" href="#eligibility">Eligibility</a>
</ontario-in-page-navigation-item>

Accessibility guidance​

  • Match the item label text to the destination section heading text as closely as possible.
  • Ensure the href points to an in-page anchor that exists on the page.
  • Keep the item inside the in-page navigation host so list semantics and styling stay consistent.

If the default slot is used, the consumer is responsible for providing a valid anchor element, correct href behavior, and accessible link text.

Technical Note: SSR (Server-Side Rendering) Considerations​

The Ontario In-Page Navigation Item component supports server-side rendering, with a few considerations:

  • Pass label and href explicitly for deterministic output.
  • Use a hash link such as #eligibility so the component can render the anchor correctly on first load.

SSR-safe example:​

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

Overview​

A single list item link used inside ontario-in-page-navigation.

For component guidance, see:

Properties​

PropertyAttributeDescriptionTypeDefault
hrefhrefIn-page anchor target, for example #eligibility.string | undefinedundefined
isCurrentis-currentMarks the current/active section.boolean | undefinedfalse
labellabelLink label for the in-page navigation item.string | undefinedundefined
languagelanguageLanguage used if localized text is required in the future."en" | "fr" | undefinedundefined

Built with StencilJS