tree-nav

// src/components/patterns/tree-nav/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tree-nav
$defs:
  item:
    type: object
    additionalProperties: false
    required:
      - title
      - url
    properties:
      title:
        type: string
      url:
        type: string
        format: uri-reference
      in_active_trail:
        type: boolean
      below:
        type: array
        items:
          $ref: '#/$defs/item'
additionalProperties: false
type: object
required:
  - label
  - items
properties:
  label:
    type: string
  items:
    type: array
    items:
      $ref: '#/$defs/item'

// src/components/patterns/tree-nav/mocks.yaml

label: Chapter navigation
items:
  - title: Chapter 1 title
    url: url
    below:
      - title: Section 1.1 title
        url: url
      - title: Section 1.2 title
        url: url
        below:
          - title: Sub-section 1.2.1 title
            url: url
          - title: Sub-section 1.2.2 title
            url: url
            in_active_trail: true
          - title: Sub-section 1.2.3 title
            url: url
          - title: Sub-section 1.2.4 title
            url: url
      - title: Section 1.3 title
        url: url
  - title: Chapter 2 title
    url: url
  - title: Chapter 3 title
    url: url
    below:
      - title: Section 3.1 title
        url: url
      - title: Section 3.2 title
        url: url

// src/components/patterns/tree-nav/tree-nav.twig

{% import _self as self %}

{% macro list(items, level) %}
	<ol class="TreeNav-list TreeNav-list--level{{ level }}">
		{% for item in items %}
			<li class="TreeNav-item">
				<a
					class="
						TreeNav-link
						TreeNav-link--level{{ level }}
						{% if item.is_active %}u-link{% else %}u-linkHover{% endif %}
					"
					href="{{ item.url }}"
					{% if item.is_active %}aria-current="page"{% endif %}
				>
					{{ item.title }}
				</a>

				{% if item.below %}
					{{ self.list(item.below, level + 1) }}
				{% endif %}
			</li>
		{% endfor %}
	</ol>
{% endmacro %}

<nav class="TreeNav" aria-label="{{ label }}">
	{{ self.list(items, 1) }}
</nav>