Menu
Menu
☰ Documentation
Documentation
A navigation menu adapted to its page region. Menu owns the final semantic navigation and link markup, including optional supporting icons.
Authoring guidance
✅
Use when
Use for authored navigation, including flat navigation, dropdown navigation, and persistent hierarchical navigation.
Properties
ariaLabel
string
class
string
*
items
MenuItem[]
mobileCollapse
boolean
navId
string
revealCurrentBranch
boolean
Automatically expands ancestor disclosures containing the current page. Current-page aria-current semantics are applied regardless.
Use when: Use when keeping the current navigation branch visible improves orientation, especially in persistent hierarchical navigation or menus whose parent items are also navigation destinations.
search
object
placeholder — string
*
type
string
"menu"
Example
Required
{
"items": [],
"type": "menu"
}
Full
{
"ariaLabel": "Example navigation",
"class": "example",
"items": [
{
"label": "Search",
"icon": {
"name": "search"
},
"link": {
"href": "#search"
}
},
{
"label": "About",
"link": {
"href": "#about"
}
}
],
"mobileCollapse": false,
"navId": "example",
"revealCurrentBranch": false,
"search": {
"placeholder": "example"
},
"type": "menu"
}
examples are generated from the schema.