Skip to main content

Version: v8.1.0-alpha.3

ontario-header-menu-tabs

Overview

Ontario Header Menu Tabs provides mobile and tablet tabbed navigation for header menus.

Displays two tabs (Topics and Sign In) with overflow menu content.
Manages keyboard navigation, focus trapping, and accessibility.

For component guidance, see:

Properties

Property	Attribute	Description	Type	Default
`autoDetectMode`	`auto-detect-mode`	Enable auto-detect handoff mode.	`boolean \| undefined`	`false`
`focusActiveTabOnOpen`	`focus-active-tab-on-open`	Whether focus should move to the active tab when the menu opens. This should only be true for keyboard-triggered opens.	`boolean`	`false`
`language`	`language`	The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none is passed, it will default to English.	`"en" \| "fr" \| undefined`	`'en'`
`signInMenuItems`	`sign-in-menu-items`	Menu items for the "Sign In" tab. Can be passed as a MenuItem array or JSON string.	`MenuItem[] \| string`	`undefined`
`topicsMenuItems`	`topics-menu-items`	Menu items for the "Topics" tab. Can be passed as a MenuItem array or JSON string.	`MenuItem[] \| string`	`undefined`

Events

Event	Description	Type
`focusFirstItem`	Event emitted to request overflow menu to focus its first item.	`CustomEvent<void>`
`focusMenuButton`	Event emitted to request header to focus the menu button. Triggered when Shift+Tab is pressed on the first tab.	`CustomEvent<void>`
`takeOwnership`	Event emitted when ownership handoff is triggered in auto-detect mode.	`CustomEvent<{ panelId: string \| null; }>`

Dependencies

Used by

ontario-header

Depends on

ontario-header-overflow-menu

Graph

Built with StencilJS

Overview
Properties
Events
Dependencies