Show A Menu#
Use nav: with the menu location:
<nav> {{ nav:header }} <a href="{{ url }}">{{ title }}</a> {{ /nav:header }}</nav>nav:header reads the WordPress menu assigned to the header location.
Inside the nav loop, {{ title }} and {{ url }} belong to the current menu item.
On multilingual themes, TemplateX first looks for a language-specific location such as header_nl when the current language is nl. If that location is not assigned, it falls back to header.
Show Child Items#
nav: starts with the top-level menu items. Use children inside a menu item to render its child items:
<ul> {{ nav:header }} <li class="{{ has_children && 'has-children' }}"> <a href="{{ url }}">{{ title }}</a> <ul> {{ children }} <li><a href="{{ url }}">{{ title }}</a></li> {{ /children }} </ul> </li> {{ /nav:header }}</ul>{{ children }}...{{ /children }} loops over them. has_children is the same check in expression form, useful in class="". The child loop renders nothing when there are no child items.
Inside children, {{ title }} and {{ url }} belong to the child item. You can nest another children loop for deeper menus. Use {{ depth }} when you need level-specific classes or markup.
Use {{ if children }} around the wrapper only when you also want to hide an empty <ul>.
Mark Current Items#
Use is_current for the current menu item:
{{ nav:header }} <a href="{{ url }}" class="{{ is_current && 'is-current' }}"> {{ title }} </a>{{ /nav:header }}Use is_parent when the current page is inside that menu branch:
{{ nav:header }} <a href="{{ url }}" class="{{ is_parent && 'is-parent' }}"> {{ title }} </a>{{ /nav:header }}You can use the same state names on hard-coded links outside a nav: loop. TemplateX reads the link's href and compares it with the current request:
<a href="/dames" class="{{ (is_parent || is_current) && 'font-bold' }}"> Dames</a>Use the grouped form above when one class should apply to either state. is_current || is_parent && 'font-bold' is not the same expression, because && and || keep their normal precedence.
Put Menus In Partials#
Menus usually belong in shared partials, such as a header:
<header> <a href="/">Site name</a> <nav> {{ nav:header }} <a href="{{ url }}" class="{{ is_current && 'is-current' }}"> {{ title }} </a> {{ /nav:header }} </nav></header>Then use the partial from your layout:
<body> <Header /> {{ slot }}</body>Add A Language Switcher#
Language switchers are normal theme markup. Use the languages loop in a partial:
{{ languages }} <a href="{{ url }}" class="{{ current && 'is-current' }}" lang="{{ code }}" hreflang="{{ locale }}"> {{ if flag }} <span aria-hidden="true">{{ flag }}</span> {{ /if }} <span>{{ label }}</span> </a>{{ /languages }}Inside languages, values such as url, label, code, locale, flag, current, available, and missing belong to the language item.