Demonstrate Menu (simple, single-level).
View this pattern on the live demo site
Flat menu partial for a one-level nav.
{% 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 -%}