How to create a drop-down menu in the Navigation bar?

Hello, 

Please could anyone here help me with a step-by-step explanation on how to create a menu in the navigation bar with drop-down menu items that look exactly like the navigation bar here on UNA.io (Community, Resources etc)?

I just can't figure out how to create a drop-down menu item like: 'Community' here on UNA.io and put inside it (in a drop-down) other menu items like: People, Organization, Groups, Events etc. It makes the menu look clean, organizes things and helps to save space in the navigation bar.

By the way, I am using the Lucid template.

Thanks. 

  • Up vote
    1
    Down vote
  • View
    1010
  • Repost
    1
  • More
Replies (7)

    • Hello OneEagle !

      Ok, let's start.

      1) Go to the Studio->Navigation->Sets area.

      2) In the modules list choose the point Custom.

      3) Press the Add button.

      4) In the appeared menu set the name of the new point. For example, Power.

      5) After saving you will see the new Power point in the list. If you were redirected to the all set list then choose the Custom module again.

      6) Click the 0 items link in the Power line.

      7) Add all necessary end menu points there like Point 1, 2 etc.

      8) Go to the Menus area of the Navigation app and press the Add New Menu button.

      9) In the appeared popup for the Set field choose your new Power point. Call this point as Power too.

      10) Back to the Menus area and find your Site navigation menu. Add there the new point.

      11) In the appeared popup for the Submenu field you need to choose your new Power point and enable the Show submenu in popup option.

      The new menu is ready.

      • Woowww LeonidS . What a great tutorial! Thank you so much for helping. It works. It have successfully created a dropdowm menu.🙂 

        To be honest, I would not be able to figure out how to do it without your assistance.

        This tutorial is very important and should be added to the Wiki section here on UNA.io

        I got few small things to point out:

        A) In point #9, you forgot to mention to also choose the style. I have chosen 'Style: Vertical Block Submenu'.

        BTW, Here on UNA.io, are you using Style: 'Vertical Block Submenu' or 'Site Dropdown Navigation'?

        B) The custom menu with the dropdown works well on the desktop, but on the mobile, the menu points in the dropdown don't show. The screen is just blank (empty). Am I missing something? How to get the menu points in the dropdown to also show on mobile? I have checked the custom menu 'Community' here on UNA.io, all its menu points in the dropdown (people, groups, Discussions etc) show well on mobile

        C) About the 'More' dropdown menu point in the navigation bar: It seems that menu points are automatically added into the 'More' menu when there is no space to display them on the navigation bar, right? Now, how to control which menu points should be shown in the 'More' dropdown menu?

        Example: I would like to display 2 or 3 menu points only in the navigation bar (e.g: Home, Community and Pricing) and send all the remaining menu points like (Channels, Wiki, About us etc) to the 'More' menu point. Hope it makes sense. Please, how to do it?

        Thanks

        • Thnx for the warm words :-) Let's review your additional questions:

          a) this submenu has the Vertical Links style

          b) try to correct like in the previous point, clear the cache of your browser, and check again

          c) yes, it is the point added automatically. So it depends form the width and seems in your purpose you need to create the new menu point by the described procedure.

          • You are welcome. Yes, it was a cache problem. I have cleared it and everything shows now.

            You are right, I will consider creating another 'More' menu point and manually put other menu points inside.

            Once  again, thanks a lot for the great support.🙂

            • Hello @LeonidS Thank you for this! It was very easy to follow.

              My problem is that the menu is not displaying correctly, after clearing cache.

              I used the first dropdown style option. How do I fix to display like the main site navigation menu?

              image_transcoder.php?o=sys_images_editor&h=238&dpx=2&t=1648243262

              • Hi @RJ Arsenault It's because you selected 'Site Dropdown Navigation' as a style option in the step #9 of LeondiS's tutorial. I made the same mistake because the name of this optiojn is misleading and doesn't work as expected. It's the first dropdown style option in the list and it happens that it doesn't display the dropdown correctly in the frontend maybe due to some CSS issues in UNA (I don't know, I am just guessing). You should use 'Vertical Links'Style instead as @LeonidS mentioned it in his other.post above.

                To fix it, please go to the Navigation App > Menus. Then Search for the custom menu you created which doesn't display correctly (in your case, it's the menu 'Find'), and edit it by choosing 'vertical Links' Style, not 'Vertical Links (Lite)'. It should work. Hope it helps.

                • K

                  awesome. This is the exact feature I'm looking for

                  Login or Join to comment.