Subpages not showing up as children in mainnavigation (Typo3) - typo3

Question

I have several pages with subpages in my pagetree as shown below.
My pagetree with subpages
However, the links to the subpages do not seem to be clickable.
I have implemented my navigation in Fluid, as per the code below (which is in the default.html file in the Layouts folder):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{rl}">Company Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<f:for each="{mainnavigation}" as="mainnavigationItem">
<f:if condition="{mainnavigationItem.children}">
<f:then>
<li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')} dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{mainnavigationItem.title}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<f:for each="{mainnavigationItem.children}" as="child">
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
</f:for>
</div>
</li>
</f:then>
<f:else>
<li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')}">
<a class="nav-link" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">{mainnavigationItem.title} <span class="sr-only">(current)</span></a>
</li>
</f:else>
</f:if>
</f:for>
</ul>
</div>
</nav>
And the mainnavigation variable is defined in the configuration of my extension in setup.typoscript as shown below. Note that levels is set to 2, in order to render the subpages.
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
}
}
As you can see in the picture below, an arrow is added for the subpages. When I click this arrow or the page title, nothing happens however.
The menu with dropdowns
Additionally I am getting this error in the webconsole:
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6
Which refers to:
$.fn.emulateTransitionEnd = transitionEndEmulator

Answer 1

You should have a look at your Setup – there you are able to define the navigation, see also here

Answer 2

You have a syntax error in your html code.
Your code:
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}>{child.title}</a>
Should be:
<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
Missing " after {child.title}, so the is not closed correctly.

Answer 3

Turns out I was not importing JQuery correctly in setup.typoscript. Once I added the following code to page, the subpages popped up correctly:
includeJSFooter {
jquery = https://code.jquery.com/jquery-3.3.1.slim.min.js
jquery.external = 1
popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
popper.external = 1
bootstrap = https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
bootstrap.external = 1
}