ontario-header-overflow-menu

This component is intended to be used as a sub-component of the ontario-header component.

Configuration

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the ontario-header-overflow-menu component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples

<ontario-header-overflow-menu
	menu-items='[
    {
      "title":"Item 1",
      "href":"/item-1"
    },
    {
      "title":"Item 2",
      "href":"/item-2"
    },
    {
      "title":"Item 3",
      "href":"/item-3"
    },
    {
      "title":"Item 4",
      "href":"/item-4"
    },
  ]'
>
</ontario-header-overflow-menu>

Custom property types

menuItems

The menu items you want to display in the dropdown menu button.

If linkIsActive is not set on a menu item, the component will attempt to set the property on a menu item, based on if it's href value is included within the URL. If linkIsActive is set, it will take precendence over the href being included within the URL.

If maxSubheaderLinks is set within applicationHeaderInfo on the ontario-header component for an application type header, some of these links will be dispersed as links within the subheader menu bar relative to the breakpoint and number set.

<ontario-header
	menu-items='[ 
		{ 
			"title": "Vehicle registration",
			"href": "/vehicle-registration",
			"linkIsActive": "false" 
		}, 
		{ 
			"title": "Driver records",
			"href": "/driver-records", 
			"linkIsActive": "false" 
		}, 
		{ 
			"title": "Accessible Parking Permits", 
			"href": "/accessible-parking-permits", 
			"linkIsActive": "false" 
		}, 
		{ 
			"title": "Highway traveler information", 
			"href": "/highway-traveler-information", 
			"linkIsActive": "true"
		} 
	]'
></ontario-header>

Property name	Type	Description
title	string	The title of the menu item (this is what will appear as the label in the header/dropdown menu)
href	string	The URL for the menu item
linkIsActive	boolean	A boolean flag for whether or not the current menu item link is active. If set to true, active classes and styles will be applied to the menu item.
onClickHandler	(event: Event) => void	An optional custom function to add to the menu item. This can be used if any additional logic should happen when the menu item is clicked.

Properties

Property	Attribute	Description	Type	Default
menuItems	menu-items	The items that will go inside the menu.	MenuItem[] | string	undefined

Dependencies

Used by

• ontario-header

Graph

---

Built with StencilJS