nav

// src/components/elements/nav/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/nav
type: object
required:
  - name
  - label
  - items
additionalProperties: false
properties:
  name:
    type: string
  label:
    type: string
  items:
    type: array
    items:
      type: object
      required:
        - text
        - url
      additionalProperties: false
      properties:
        text:
          type: string
        url:
          type: string
        active:
          type: boolean

// src/components/elements/nav/mocks.yaml

name: ExampleNav
label: Example
items:
  - text: Hello
    url: /hello
    active: true
  - text: World
    url: /world
  - text: Foo
    url: /foo
  - text: Bar
    url: /bar

// src/components/elements/nav/nav.twig

<nav
	class="{{ name }}"
	aria-label="{{ label }}"
>
	<ul class="{{ name }}-list">
		{% for item in items %}
			<li class="{{ name }}-item">
				<a
					class="{{ name }}-link"
					href="{{ item.url }}"
					{% if item.active %}aria-current="page"{% endif %}
				>
					{{ item.text }}
				</a>
			</li>
		{% endfor %}
	</ul>
</nav>