Meta navigation-drop down menu

1

Hello. I need help on how to create my meta navigation with drop down. How can I type it in correctly in blueprint, in my template and in kirby.

Here is my code:

	<ul>
		<li>Suche</li>
	</ul> 
	<ul>
		<li>FAQ</li>
	</ul>
	<ul>
		<li>Deutsch<i class="fa fa-caret-down"></i>
	<ul>
		<li>Englisch</li></ul>
		<li>Login<i class="fa fa-caret-down"></i> 
	<ul>
		<li>Student</li>
		<li>Dozent</li>
	</ul>
		<li>Anfahrt<i class="fa fa-caret-down"></i>
	<ul>
		<li>Standorte<i class="fa fa-caret-down"></i>
	<ul>
		<li>Gelsenkirchen</li>
		<li>Recklinghausen</li>
		<li>Bocholt</li>
		</li>
	</ul>
</ul>
</div>

Thanks in advance!!

2

welcome! :~)

to begin with, your HTML is not really semantic (i would suggest using a heading tag for headings, instead of a list with a single list item in it) and I’m pretty sure it is not properly formatted either – But that’s sort of hard to tell because your indentation doesn’t match the content, for example:

<ul>
    <li>Deutsch<i class="fa fa-caret-down"></i>
<ul> <= should this be a closing tag (</ul>) instead?

Regarding your question: it’s entirely up to you how you create blueprints and templates. These recipes could help you get started:

and for the dropdown behavior, maybe this can get you an idea of what’s needed:
https://www.w3schools.com/howto/howto_js_dropdown.asp

3

Thank you! I am new on kirby thats why I dont understand the instructions on the kirby website. The <ul> you mentioned is part of a drap down menu. I have a working drop dowm menu on html but I need to make it also work on kirby.

Bildschirmfoto 2021-02-27 um 16.26.52

Here you can see that I have a menu navigation with drop downs.

4

Nevertheless there are about three closing li tags missing from your above HTML. So it might be working because the browser automatically adds them, but the code is still not correct.

5

Since we don’t know the structure of your site, it’s hard to tell how to build this navigation.

But maybe a nested menu like described here is what you need:

6

Thank you Sonja for the link. What about the blueprints and the panel? What should I add there?

7

As I said without knowing your content structure, it’s hard to tell.

The blueprints are for generating the forms in the Panel. So you need to ask yourself what sort of content models you need. What are the parent pages? Which sort of subpages should these parent pages have? Do all subpages of a given parent have the same sort of content (=all one blueprint), or do you need multiple blueprints.

I suggest you have a look at the Starterkit and analyze how this is done, trying to understand the structure.

We also have a collection of example blueprints for different types of pages here:

This recipe might also help getting a general overview:

8

Its hard for me to understand all the instructions…what do you want me to send you, so you can help me to build the navigation?

9

It’s hard to know where to start without knowing your content structure…

What is your problem exactly with the documentation?