dropdown in navigation?

Evgeniy Onegin

How to make a dropdown in nodebb navigation?

Jey-Cee 0

What was the solution?

fais3000

@Jey-Cee-0 @Evgeniy-Onegin We were able to do it via this technique.

Take the markup and css for the Secondary Nav menu https://codepen.io/kuus/pen/MwXzNm

Place it in the Global Widgets as an HTML widget.

This way you'll not be changing templates and can get the benefits of the new updates in the theme.

phenomlab

@fais3000 Sorry for digging up an old thread, but I'm curious to know if adding a dropdown into the stock header bar supplied with NodeBB is possible ? The real issue here is the limitation of screen estate on some devices, and having sub items in a dropdown would be a good way to combat this.

fais3000

@phenomlab No worries, this is still a pain point for me.

I have been using above technique on a couple of forums via widgets but it is not ideal. It works well for desktops and larger screens but for mobile we have to push the secondary menu items into the top default menu (stock menu) via JS due to the real estate issue. So yes it is possible, but not ideal as it doesn't load sometimes for mobile users if there is a js error in any of the third party services (like ads).

I also tried updating the stock header via persona tpl files, but i've been burned as the theme structure updates frequently with new releases. I've learned to avoid overwriting the templates.

The best approach would be to have this ability in the core to handle either multi level navigation or a better responsive setup which can hold relatively larger number of menu items.

Mega menus are pretty common in majority of websites these days and if nodebb team supports them it would solve the issue. e.g https://geedmo.github.io/yamm3/

May be @baris or @PitaJ know of better solutions.

phenomlab

@fais3000 @baris @PitaJ any thoughts on this please ?

AnOdeToBB

@phenomlab looking for something similar myself.

<baris>

This will be available in our next release. https://github.com/NodeBB/NodeBB/issues/9967

phenomlab

@baris fantastic news. Thanks

phenomlab

@baris Is there a limit in terms of characters or size ?

Another point here is that this same error seems to completely remove all drop-down navigational items !!

<baris>

Yeah that would happen on mongodb because of the way the navigation items are stored(They are stored as json strings in a sorted set). We will have to refactor it to store in proper hashes. https://github.com/NodeBB/NodeBB/issues/10077

phenomlab

@baris Thanks

<baris>

This is on master now, should be able to put in much larger dropdowns in nav items. Will be available with 1.19.0.

crazycells

@baris said in dropdown in navigation?:

This will be available in our next release. https://github.com/NodeBB/NodeBB/issues/9967

Hi @baris , is there any way to re-group several navigation items into one as a dropdown menu while maintaining their visibility settings?

we have several plugins that use navigation bar such as:

/map
/calendar
/feed
/glossary

(some are for registered users only and opens in a new window)

So, the navigation bar is getting crowded, I wonder if there is any way to implement this?

<baris>

No built in way to do it. But you can control the visibility of the dropdown menu items via custom css.

Here is a sample dropdown that shows an item for logged in users and a different item for guests.

<li class="loggedin"><a href="https://somelink.com">visible to logged in users</a></li>
<li class="guest"><a href="https://otherlink.com">visible to guests</a></li>

Once you create a dropdown like that you can control the visibility via custom css. The body element is given a class based on the user's logged in status. user-loggedin if they are logged in and user-guest if they are logged out.

So in your custom css you can use those classes.

#main-nav .dropdown-menu .loggedin, #main-nav .dropdown-menu .guest { 
  display: none;
}
body.user-loggedin #main-nav .dropdown-menu .loggedin {
    display: block;
}
body.user-guest #main-nav .dropdown-menu .guest {
    display: block;
}

crazycells

@baris thanks
this code should do the job.