How To Build A Dynamic Menu In ExpressionEngine?
ExpressionEngine CMS does not provide any native option to set the menu as dynamically for the website.
We can set a dynamic menu while developing an ExpressionEngine Website without the use of external addons by alternative ways. For this, we have to create one channel for the navigation and that channel works as navigation. But this method has some limited features.
To get easy configure navigation and for more features, we have to get the third party addons for the navigation menu. The most visited site is devot-ee for the third-party addons.
The most suitable addons for the navigation are the Structure and NavEE.
Each navigation addon has its own features so we have to choose the one based on the needs of our website. We are explaining the features and limitations of each addon so it is easy to know which addons are suitable for our website.
Structure
We can get the structure add-on form devotee third-party site. To install this addon, you have to uninstall the add-on if it is installed on your website.
Structure is a powerful add-on which provides the facility to create pages and generate navigation. We can manage the navigation with a simple interface. We do not require any template to create URLs as usually and static and listing pages can be managed by treemap view where we can set parent and child pages to each other by moving drag and drop facility and also change the order of pages by drag and drop facility which is easy for us.
Structure provides three types of the page to handle the navigation
1) Pages 2) Listing 3) Asset
Pages
To create the navigation, we have to assign page types to a particular channel which we want to use as navigation. Pages show up in Structure navigation tags and the main CP site tree. Pages is also a container of the listings. In pages, we have to select the template which is used as display content on the page when the structure URL of that page will be open at the front side.
Listing
To create listings, we have to assign the listing types to a particular channel. Listings must be connected with one page and channel to enable easy adding and editing. Listing types entries do not display in the structure navigation, but we still set URLs and Structure data posted to them. Listing is generally used for a list type of data that shows on a single page and clicks on it to go to a detail page. Means it will auto-create the details page URL using the listing. For an example — listing of products, blog posts, etc. If something consists of multiple entries and does not need to appear within the site navigation, listings are a proper solution.
Assets
To create listings, we have to assign the listing types to a particular channel. Assets do not contain page URLs and it means that it is the just information that will be shown on the other templates and sections of the pages. For example banner ads in the pages and entries which are related to the page. Assets are normal channel entries, so they can still get through the normal templating system when needed.
The structure provides many other features below which help in the navigation system.
It has the ability to find the duplicate structure URL. So we can find out and we should make a unique one.
It also provides the technique to redirect to the first child of any page by using the first child redirect tag.
It provides multi-language support in the navigation.
We understand this addon with this below example.
Provide Channel Setting
We need to decide which channel is used for which types and template options.
In this example, we have selected the “Listing” option as type “news/index” option as a template as an option for the News channel.
we have selected the “Pages” option as type “pages/index” option as a template as an option for Pages channel.
Create the page
To click on the “Add Your First Page” button.
We have added the “news” in the field of the “Structure Page URL” field. Then, we select the “news/index” structure index. Then, we can select the “News” channel in “Listing Channel” field to set the detail page URL for all the entries inside the news channel.
Then, we will add the second page “About” to click on the “Add Page”.
After adding these two pages, the navigation structure shows like below.
Add Navigation At The Front Side
To add this navigation at the front side, we will add the “exp:structure:nav” templated tag.
{exp:structure:nav css_class=”navbar-nav”}
We have used the “css_class” attribute to add design to this navigation. In this example, we have added the “navbar-nav” to this attribute because we have used the bootstrap design library.
If we want to create more advanced navigation then we should use the “exp:structure:nav_advanced” template tag for more customization in the navigation. We can check more details and examples for template tag in the documentation of this addon.
NavEE
NavEE is used to managing navigation in a simple way without any limitation. It provides the ability to manage multiple navigations. If your site has lots of different navigation sections then this addon is more suitable for your website.
It also provides the drag and drop facility to sort the navigation item. It also provides a tree structure of the menu to define the multi-level menu to add child navigation items.
We are looking at the below steps to set up the navigation using the below example.
Create Navigation Group
We have to first create a navigation group and then individual navigation items inside of the group. Individual navigations are displayed in a tree view, so you can set hierarchy (tree structure) and order.
Click on the “Create New” button to create the new navigation group.
We have created one “Top Navigation” navigation group.
Create Navigation Item
We have clicked on the “Top Navigation” link to add the navigation item inside it.
So the detail page of the “Top Navigation” group is opened where we have to click on the “Create first navigation item” button to create the new navigation item.
So “Add Navigation Item” will be open like below.
Link Text: We have to add our text which will be shown for the link text. Currently, we have to add the “News” menu so we have added the “News” text inside this field.
Link Type: This field provided the three different options to choose the type of link. The first option is the “Manual” that means we can add a direct link URL of internal and external websites. The second option is “Guided” where users can select the three things like the specific template then specific channel and the select one entry of channel. The third option is the “Pages” where users can select the pages URI which are created by the pages module in the channel entries.
Link: This field is only shown when the link type field is selected with option “Manual”. In this example, we have added the internal link because we have already created the news/index template. So in this field, we have added the “/news” value.
After creating the first navigation item, we can see this item in the list now.
Now, we will create one another pages type link for the about. We have already created the pages channel and created one about entries and provide the ‘/about’ URL and ‘pages/index’ template in that entry. So, here, we will just select the “/about” option from the “Select from Pages Module” dropdown for the about menu.
Now, we will also create one child navigation in the news menu.
We have clicked on the plus icon button of the “News” navigation item.
We will add the “Hello World News” text in the “Link Text” field. Then, we will select the “Link Type” is a “Guided”. So we will select the “News — detail” template in the “Select Template” field. We will select the “News” channel on the channel “Select Channel” field. We will select the “Hello World News” news channel entry of “Select Entry” field.
So now a child navigation item is created and it is shown like below.
Add Navigation At The Front Side
To show this navigation at the front side, we have to use the template tag “exp:navee:nav” tab in the template.
{exp:navee:nav nav_title=”top_navigation” class=”navbar-nav” kids_class=’dropdown-menu’}{/exp:navee:nav}
In this template tag, we have to add the navigation group name “top_navigation” in the nav_title.
To apply our external CSS we have added the class using its other parameter. We have added the “navbar-nav” value in the class field. To apply the design to child navigation we can use the kids_class parameter.
In this example, we have used the bootstrap library.
Output At The Front Side
If we want to create more advanced navigation then we should use the “exp:navee:custom” template tag for more customization in the navigation. We can check more details and examples for template tags in the documentation of this addon.
Conclusion
To use the above “NavEE” and “Structure” addons, both addons are best according to our website’s needs. However, NavEE addon is the most suitable when we want to use multiple navigations on our website. NavEE also works with the “Pages” module so we do not need to remove the Pages module for NavEE addon setup.
Originally published at https://www.zealousweb.com.
