Ontario.ca homepage Ontario.ca homepage
FR Français

Dynamic Sign-In Menu - Sample Implementation

Sample Code for Reference

This demo shows how you could implement a dynamic, API-driven sign-in menu in your project. Click the "Sign in" button above to see the example in action. The menu items are populated from JavaScript, not hard-coded HTML.

Note

This is a reference implementation provided as an example. It is not part of the core Ontario Design System package. Teams should adapt these patterns to fit their specific requirements.

1. Adapting for Your Project

How to use this sample: This is a reference pattern, not a plug-and-play component. Use it to guide how your project fetches, renders, and manages a dynamic sign-in menu.

Quick Start

This is a sample implementation you can adapt for your project. The code demonstrates patterns for:

Demo note: This demo currently calls a sample API configuration to show how the flow works end-to-end.

Quick Start code:

OntarioSignInMenu.initialize({
    useApi: true,
});

Running the demo locally

Opening the HTML file directly will break asset paths (fonts, logos, scripts). Run a local dev server instead.

pnpm run dev

Then open:

http://localhost:3000/demos/sign-in-menu-dynamic/index.html

Next steps

  1. Review the sample code at ontario-sign-in-menu-dynamic.js.
  2. Adapt the patterns to fit your project requirements.

API response format

The actual API returns a simple structure with basic fields:

Note: This demo does not include default sign-in items. If the API returns no items, nothing will appear unless you provide your own data.

{
  "items": [
    {
      "id": "service-ontario-account",
      "label": "ServiceOntario account",
      "description": "Health cards, driver's licences, licence plates",
      "url": "https://www.ontario.ca/page/serviceontario-account"
    },
    {
      "id": "ontario-business-account",
      "label": "ONBusiness",
      "description": "Business Registry, Licenses and Permits, Business Information",
      "url": "https://www.app.ics.gov.on.ca/onbis/"
    }
  ]
}

Reference Documentation: View Implementation Guide

Sample Code: Review ontario-sign-in-menu-dynamic.js to see the implementation patterns.