🎁📅📣 ONE FESTIVE MONTH! | Exclusive offers for Cloud Shared Hosting - 70% OFF | Starting from $3.99/mo
Learn Una

Una is a successor to the famous Boonex Dolphin application for creating free Social Network!

• Last Updated: 04/23/2020
• ( 5 minutes reading )

How to manage Navigation Menus in Una Social Network

Introduction

Considering the fact that easy navigation is one of the most important aspects of a website, you should carefully organize your site menus. We are all aware of how frustrating it could get if you spend a long time trying to find your way through a website. It could reflect in potential users lost, and no one wants that. 

In Una, menus are collections of order links that can be assigned to any menu position available in the template you are using. Each menu consists of a set that holds specific items. The fact that menus could be displayed on any page and in any form gives you great flexibility.

In this tutorial, we are going to guide you on how to manage and organize your menus effectively.

 

Navigation Builder Overview

For a start, please log in to your Una Studio and access the "Navigation" app.

 

Access Navigation App

 

This is where the management of all your website menus, sets, and items takes place. You can see it is divided into three separate tabs, each dedicated to the given element.

 

Menus Tab Overview

 

Under the first "Menu" tab, you can see a list of all menus currently created in your Una website. You can sort the menus per module by choosing it from the top dropdown menu, and you can find specific menus using the search tool.

The toggle switch button in front of each menu allows you to control whether the menu is displayed on the website frontend. Intuitively, the checkmark indicates the menu is enabled, whereas the "x" icon shows it is disabled.

 

Editing Menus

To edit a menu, please click on the corresponding pencil icon.

 

Edit Menu

 

Upon doing that, a new pop-up window appears where you have to configure the menu.

  • System Name - This is the internal title of the menu. It is intended only for your reference.
  • Set - This determines the set of items to be assigned to the menu. If you choose an existing set, the items it contains are automatically assigned to the menu. In case you want to create a new set, please choose the "Create New" option and specify the name of the set in the "Set Title" field. Similarly to the menu name, the set name is also only for your reference.
  • Style - From this dropdown menu, you need to select the type of the menu. There are various options to choose from, depending on the purpose of the menu.

 

Menu Details

 

Once you apply the desired changes, please click on the "Save" button.

 

Assigning Items to Menus

To assign or edit the menu items, please click on the menu name or on the "X items" link.

 

Edit Menu Items

 

Upon doing that, you are redirected to the "Items" tab. The dropdown menus at the top of the page indicate which set you are currently editing. You can use them to navigate through your sets if this seems like a more convenient way.

You have two options to assign items to your menu - import them or create them manually. In our example, we are going to be creating one manually.

 

Import or Add Menu Items

 

Upon clicking on the "Add new item" button, a pop-up window appears where you have to specify the item details.

  • System Name - This is the internal name of the item. It is intended only for your reference.
  • Title - The title of the item as it is going to be shown within the menu on the website frontend.
  • Submenu - This setting determines whether a submenu to be included in the item. If selected, it is displayed upon clicking on the menu item.
  • URL - In this field, you need to enter the item destination URL. If this is an internal item, you have to specify only the relative URL (the part after yourdomain.com). In case the item is going to redirect to an external source, please make sure to specify the full URL.
  • Target - This setting lets you control whether the user stays on the same or they are redirected to a new page upon clicking on the menu item.

 

Item title and URL

 

  • OnClick - In this field, you can specify a JavaScript function to be executed upon clicking on the menu item. 
  • Hidden on - This option allows you to hide the item on specific devices. In case you want to select several devices, please hold the "ctrl" (PC)/"Command" (Mac) key on your keyboard.
  • Icon - You are allowed to insert a font icon or upload an image from your local computer for this menu item.

 

Add Item

 

When you are ready with the details, please click on the "Add" button to save your new menu icon.

Afterward, you can see the new item listed along with the rest of the items assigned to this set. The order in which they appear in the "Items" section determines their sequence in the menu on the frontend. You can organize the items by clicking on the horizontal bars icon and dragging them to the desired position.

 

Organize Items

 

Once you perform the desired changes, please go ahead and check if the menu modification was successful and if the menu items are correctly functioning. 

 

New Menu Item on the Frontend

 

As soon as you confirm everything looks and works as expected, you are all set.

 

To sum up, in this tutorial, you learned how to modify your website menus, sets, and menu items. We hope this information was useful to you, and you have a clear idea of how menus operate in Una. As usual, we would like to thank you for trusting our guidance.

 

 

...
Sebahat
Technical Support Captain & Content Manager

Sebahat is a young and bright person who had become an invaluable part of our team. Started as a Customer Care Representative who quickly evolved into a Tech-savvy well familiar with every support layer of the company. Driven by the aim to constantly improve our customers’ experience she is committed to enhancing the extraordinary support we deliver.