<p>For Craft 2, a number of plugins exist that assist with building navigational structures. None of those has been made available for Craft 3 (yet), but one plugin-less option (thanks to Ben Parizek, who let me in on this) would be, to create a 'navigation' section (structure), in which you can create navigation entries (= navigation items) that you can than drag and drop to get the right navigational structure.</p>

<p>Each entry in this section has, for example:</p>

<ul>
<li>A field that connects it to another entry</li>
<li>A field that let's the user add a url to navigate to</li>
<li>Any other field that would let the user alter the navigation's behaviour (color, open in new window, etc)</li>
</ul>

<p>After that, it would be up to you to translate this structure to a navigation in your template(s).</p>

CC BY-SA 3.0
2017-11-06T14:28:53.583Z
2017-11-06T14:28:53.583Z
Paul
<p>A super simple process would be to just use a single Structure called "Pages", similar to what Paul said, (or whatever you want). Just attach a <code>lightswitch</code> field to it like the following:</p>

<p><a href="https://i.sstatic.net/s3MvA.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/s3MvA.png" alt="enter image description here"></a></p>

<p>Then in your markup you could do something like this:</p>

<pre><code>&lt;ul&gt;
{# Get top-level entries in pages structure (exclude home page)  #}
{% set pages = craft.entries.section( 'pages' ).id( 'not 1' ).level( 1 ).hideFromNavigation( 'not 1' ).includeInTopNavigation( 1 ) %}
    {# Loop through top-level entries #}
    {% for page in pages %}
        &lt;li&gt;
            &lt;a href="{{ page.getUrl }}"&gt;
                {{ page.title }}
            &lt;/a&gt;
        &lt;/li&gt;
    {% endfor %}
&lt;/ul&gt;
</code></pre>

<p>The screenshot/code is from Craft 2 but the same concept applies to 3 as well.</p>

CC BY-SA 3.0
2018-03-08T05:47:36.797Z
Yes, But I have created globals for the same.
Kantesh Hotchandani
CC BY-SA 3.0
2018-03-16T23:56:28.567Z
That works too. A global Entry field could essential do the same thing!
Mark Busnelli Jr
CC BY-SA 3.0
2018-03-06T21:15:21.697Z
2018-03-06T21:15:21.697Z
Mark Busnelli Jr
<p>CraftCMS doesn't come with such functionality by default. In Craft 2, we had some nice plugins but not available in Craft 3 so far.</p>

<p>You can achieve this by Categories with "Category Tree" plugin which adds drag n drop to categories with full control from admin and its very easy to pull your category group at front-end.</p>

<pre><code>{% set categories = craft.categorytree.getTree() %}
{% for category in categories %}
  &lt;ul&gt;
     &lt;li&gt;{{ category.model.slug }}&lt;/li&gt;
     {% if category.children is defined %}
       &lt;ul&gt;
         {% for category in category.children %}
           &lt;li&gt;{{ category.model.slug }}&lt;/li&gt;
         {% endfor %}
      &lt;/ul&gt;
    {% endif %}
 &lt;/ul&gt;
{% endfor %}
</code></pre>

<p>Reference Link:
<a href="https://github.com/pdaleramirez/category-tree" rel="nofollow noreferrer">https://github.com/pdaleramirez/category-tree</a></p>

CC BY-SA 4.0
2018-05-24T04:50:54.847Z
2018-05-24T04:58:05.160Z
2018-05-24T04:58:05.160Z
Ankit Chauhan
<p>How to create menus from admin panel of Craft 3 so I can render into frontend header and footer?</p>

CC BY-SA 3.0
2017-11-06T12:59:43.387Z
The same way like you do it with craft 2. You pull all your entries and render them in your preferred way. You would usually create an entry type pages and pull them. This is a recursive macro that creates an n-dimensional menu https://pastebin.com/Jm3ujhD7
Robin Schambach
CC BY-SA 3.0
2017-11-06T13:07:59.523Z
Note: the link is about craft 2, for craft 3 you have to replace `.first()` with `.one()` and `find()` with `.all()` other than that it's the same
Robin Schambach
CC BY-SA 3.0
2017-11-06T13:22:57.453Z
Actually I am new in craftcms, and I have created Single type entry for the home page and I have also created channels for entries, but basically I want specific menu pages on frontend. Is there any other suggestion to render menu?
Kantesh Hotchandani
CC BY-SA 3.0
2017-11-06T13:30:16.133Z
You can add a field (eg checkbox) into these entries like `showInMenu` then you would search for all entries that are checked `{% set menuEntries = craft.entries.section('your-handle').showInMenu('1').all() %}` menuEntries is now an array of these models. You can loop through it and render all entries
Robin Schambach
<plugin-development><craft3><menu>
How to create menu in backend using Craft 3
# How to create menu in backend using Craft 3

(Asked by: username_0 on 2017-11-06)

How to create menus from admin panel of Craft 3 so I can render into frontend header and footer?

**Tags:** plugin-development, craft3, menu

> **Comments:**
> **username_1**: The same way like you do it with craft 2. You pull all your entries and render them in your preferred way. You would usually create an entry type pages and pull them. This is a recursive macro that creates an n-dimensional menu https://pastebin.com/Jm3ujhD7  
> **username_1**: Note: the link is about craft 2, for craft 3 you have to replace `.first()` with `.one()` and `find()` with `.all()` other than that it's the same  
> **username_0**: Actually I am new in craftcms, and I have created Single type entry for the home page and I have also created channels for entries, but basically I want specific menu pages on frontend. Is there any other suggestion to render menu?  
> **username_1**: You can add a field (eg checkbox) into these entries like `showInMenu` then you would search for all entries that are checked `{% set menuEntries = craft.entries.section('your-handle').showInMenu('1').all() %}` menuEntries is now an array of these models. You can loop through it and render all entries  

---

## 3 answers

### Answer by username_2 on 2017-11-06. Score: 3

For Craft 2, a number of plugins exist that assist with building navigational structures. None of those has been made available for Craft 3 (yet), but one plugin-less option (thanks to Ben Parizek, who let me in on this) would be, to create a 'navigation' section (structure), in which you can create navigation entries (= navigation items) that you can than drag and drop to get the right navigational structure.

Each entry in this section has, for example:

* A field that connects it to another entry
* A field that let's the user add a url to navigate to
* Any other field that would let the user alter the navigation's behaviour (color, open in new window, etc)

After that, it would be up to you to translate this structure to a navigation in your template(s).


---

### Answer by username_3 on 2018-03-06. Score: 1

A super simple process would be to just use a single Structure called "Pages", similar to what username_2 said, (or whatever you want). Just attach a lightswitch field to it like the following:

Then in your markup you could do something like this:

{# Get top-level entries in pages structure (exclude home page)  #}
{% set pages = craft.entries.section( 'pages' ).id( 'not 1' ).level( 1 ).hideFromNavigation( 'not 1' ).includeInTopNavigation( 1 ) %}
    {# Loop through top-level entries #}
    {% for page in pages %}
        
            
                {{ page.title }}
            
        
    {% endfor %}


The screenshot/code is from Craft 2 but the same concept applies to 3 as well.

> **Comments:**
> **username_0**: Yes, But I have created globals for the same.  
> **username_3**: That works too. A global Entry field could essential do the same thing!  

---

### Answer by username_4 on 2018-05-24. Score: 1

CraftCMS doesn't come with such functionality by default. In Craft 2, we had some nice plugins but not available in Craft 3 so far.
You can achieve this by Categories with "Category Tree" plugin which adds drag n drop to categories with full control from admin and its very easy to pull your category group at front-end.
{% set categories = craft.categorytree.getTree() %}
{% for category in categories %}
  
     {{ category.model.slug }}
     {% if category.children is defined %}
       
         {% for category in category.children %}
           {{ category.model.slug }}
         {% endfor %}
      
    {% endif %}
 
{% endfor %}

Reference Link:
https://github.com/pdaleramirez/category-tree


---

