Skip to content

Menu

The menu can be used to display a collection of links to other pages or sections on the current page.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. WordPress
  5. Specifications
    1. Properties
  6. Changelog
  7. Related
    1. Contains
  8. Examples

Anatomy

  1. Items

Usage Guidelines

The menu can be used to display a collection of links to other pages or sections on the current page.

Accessibility

The menu can be navigated by tabbing through each menu item, including subitems.

WordPress

The menu in the site header can be configured under Appearance > Menus.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
itemsarray - Yes-
└ itemobject Individual menu item --
└ titlestring Label text Yes-
└ urlstring Link location Yes-
└ currentboolean Whether the menu item matches the current page being viewed No-
└ targetstring target attribute for link No-
└ childrenarray Submenu items No-
└ itemobject Nested menu items --
└ child_menu_classstring Additional class added to nested menu No-
rfi_itemboolean Extra button CTA item added to end of list. Settings are pulled from site options. No-

Changelog

6.14.0 (2024-07-31)

  • fix: handle keyboard vs click focus correctly (#617) (5727e53)

6.8.2 (2024-04-02)

  • fix: add custom property for item line (44fe122)
  • fix: add default modifier for submenu (4c48e37)
  • fix: include all menus when generating toggle buttons (#557) (793a749)

4.0.0 (2023-05-24)

  • fix: check for target attribute on third-level items (#425) (baecdb3)

3.2.1 (2023-05-02)

  • fix: align classes and styling for link items (#412) (b2a04c4)
  • fix: remove 'link' class from button menu items (#409) (d423ac5)

2.4.1 (2023-01-24)

  • fix: support target attribute for links (#368) (04e3159)

1.35.0 (2022-06-30)

  • fix: add correct class to dropdown links (7f2042d)

1.29.0 (2022-03-14)

1.27.0 (2021-12-10)

  • fix: preventing sub nav menu from sticking on parent click (#167) (c19a159)

1.18.0 (2021-04-01)

  • fix: added button text for screen readers (#78) (6879462)

1.1.0

  • menu added

Contains

Other core components embedded within this template.

Examples

Default 

{% set items = [
	{
		title: "Menu Item 1",
		url: "#"
	},
	{
		title: "Menu Item 2",
		url: "#",
		current: true
	},
	{
		title: "Menu Item 3",
		url: "#",
		children: [
			{
				title: "Menu Item 3 - Child 1",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 2",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 3",
				url: "#"
			}
		]
	},
	{
		title: "Menu Item 4",
		url: "#"
	},
	{
		title: "Menu Item 5",
		url: "#"
	}
] %}

<x-menu :items="items" />

Large Variant 

{% set items = [
	{
		title: "Menu Item 1",
		url: "#"
	},
	{
		title: "Menu Item 2",
		url: "#",
		current: true
	},
	{
		title: "Menu Item 3",
		url: "#",
		children: [
			{
				title: "Menu Item 3 - Child 1",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 2",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 3",
				url: "#"
			}
		]
	},
	{
		title: "Menu Item 4",
		url: "#"
	},
	{
		title: "Menu Item 5",
		url: "#"
	}
] %}

<x-menu class="tux-c-menu--large" :items="items" />

Wide Variant 

{% set items = [
	{
		title: "Menu Item 1",
		url: "#"
	},
	{
		title: "Menu Item 2",
		url: "#",
		current: true
	},
	{
		title: "Menu Item 3",
		url: "#",
		children: [
			{
				title: "Menu Item 3 - Child 1",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 2",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 3",
				url: "#"
			}
		]
	},
	{
		title: "Menu Item 4",
		url: "#"
	},
	{
		title: "Menu Item 5",
		url: "#"
	}
] %}

<x-menu class="tux-c-menu--wide" :items="items" />

Nested Pages 

{% set items = [
	{
		title: "Menu Item 1",
		url: "#"
	},
	{
		title: "Menu Item 2",
		url: "#",
		current: true
	},
	{
		title: "Menu Item 3",
		url: "#",
		children: [
			{
				title: "Menu Item 3 - Child 1",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 2",
				url: "#",
				children: [
					{
						title: "Menu Item 3-2-1",
						url: "#"
					},
					{
						title: "Menu Item 3-2-2",
						url: "#",
					},
					{
						title: "Menu Item 3-2-3",
						url: "#",
						class: "tux-c-button tux-c-button--outlined"
					}
				]
			},
			{
				title: "Menu Item 3 - Child 3",
				url: "#"
			}
		]
	},
	{
		title: "Menu Item 4",
		url: "#"
	},
	{
		title: "Menu Item 5",
		url: "#"
	}
] %}

<x-menu :items="items" />

Nested Pages - Mega 

{% set items = [
	{
		title: "Menu Item 1",
		url: "#"
	},
	{
		title: "Menu Item 2",
		url: "#",
		current: true
	},
	{
		title: "Menu Item 3",
		url: "#",
		children: [
			{
				title: "Menu Item 3 - Child 1",
				url: "#"
			},
			{
				title: "Menu Item 3 - Child 2",
				url: "#",
				children: [
					{
						title: "Menu Item 3-2-1",
						url: "#"
					},
					{
						title: "Menu Item 3-2-2",
						url: "#"
					},
					{
						title: "Menu Item 3-2-3",
						url: "#",
						class: "tux-c-button tux-c-button--outlined"
					}
				]
			},
			{
				title: "Menu Item 3 - Child 3",
				url: "#",
				children: [
					{
						title: "Menu Item 3-3-1",
						url: "#"
					},
					{
						title: "Menu Item 3-3-2",
						url: "#"
					},
					{
						title: "Menu Item 3-3-3",
						url: "#"
					}
				]
			},
			{
				title: "Menu Item 3 - Child 4",
				url: "#"
			}
		]
	},
	{
		title: "Menu Item 4",
		url: "#"
	},
	{
		title: "Menu Item 5",
		url: "#"
	}
] %}

<x-menu :items="items" :mega="true" />