Skip to documentation content

Menu (simple, single-level)

All complete examples

Demonstrate Menu (simple, single-level).

What this example teaches

  • Reuse the Menu (simple, single-level) theme partial across pages
  • Keep custom fields on the template that owns them

View this pattern on the live demo site

Files

Flat menu partial for a one-level nav.

Liquid
{% comment %}
	Purpose: Renders a single-level site navigation (top-level links only). Deeper menu children are not rendered.

	Escaping: `nav_link_classes` is escaped once via `var` (used in the loop without a second filter). Other class strings use `default | escape` at output.

	Inputs:
		menu - Menu object from {% menu %} (iterable; each item uses name, href.value).
		nav_classes - Classes on the outer <nav>. Defaults to 'navbar navbar-expand-lg'.
		nav_id - Optional id on <nav>.
		aria_label - Accessible name for the navigation region. Defaults to 'Main'.
		show_navbar_toggler - When true, outputs toggler and collapse wrapper. Defaults to false.
		mobile_menu_label - Label beside the toggler. Defaults to 'Menu'.
		mobile_menu_label_classes - Classes on the mobile label span. Defaults to 'navbar-text d-lg-none'.
		container_classes - Inner wrapper. Defaults to 'container'.
		ul_classes - Root <ul> classes. Defaults to 'navbar-nav'.
		nav_link_classes - Classes on each top-level link. Defaults to 'nav-link'.
		navbar_toggler_classes - Toggler button classes. Defaults to 'navbar-toggler'.
		navbar_toggler_aria_label - aria-label on toggler. Defaults to 'Toggle navigation'.
		collapse_classes - Collapse wrapper classes. Defaults to 'collapse navbar-collapse'.
{% endcomment -%}
{%- if menu.is_valid -%}
	{%- var show_navbar_toggler = show_navbar_toggler | default: false -%}
	{%- var nav_link_classes = nav_link_classes | default: 'nav-link' | escape -%}
	<nav class="{{ nav_classes | default: 'navbar navbar-expand-lg' | escape }}"{% if nav_id is_valid %} id="{{ nav_id }}"{% endif %} aria-label="{{ aria_label | default: 'Main' | escape }}">
		<div class="{{ container_classes | default: 'container' | escape }}">
			{%- if show_navbar_toggler -%}
				{%- id var collapse_id = suffix: '_collapse' -%}
				<span class="{{ mobile_menu_label_classes | default: 'navbar-text d-lg-none' | escape }}">{{ mobile_menu_label | default: 'Menu' }}</span>
				<button class="{{ navbar_toggler_classes | default: 'navbar-toggler' | escape }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ collapse_id }}" aria-controls="{{ collapse_id }}" aria-expanded="false" aria-label="{{ navbar_toggler_aria_label | default: 'Toggle navigation' | escape }}">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="{{ collapse_classes | default: 'collapse navbar-collapse' | escape }}" id="{{ collapse_id }}">
			{%- endif -%}
			<ul class="{{ ul_classes | default: 'navbar-nav' | escape }}">
				{%- for menu_item in menu -%}
					<li class="nav-item">
						<a class="{{ nav_link_classes }}" href="{{ menu_item.href.value }}">{{ menu_item.name }}</a>
					</li>
				{%- endfor -%}
			</ul>
			{%- if show_navbar_toggler -%}
				</div>
			{%- endif -%}
		</div>
	</nav>
{%- endif -%}