Solved dropdown in navigation?

[AnOdeToBB]

@phenomlab looking for something similar myself.

[baris]

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

barisusakli created this issue in NodeBB/NodeBB

closed ability to create dropdowns in navigation settings #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

barisusakli created this issue in NodeBB/NodeBB

closed refactor navigation:enabled #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.