Bizarre dropdown menu limitation, or am I missing something?

If you use the Bootstrap Studio component Navigation Clean, it has a dropdown menu included as one of the menu items, and within this dropdown are three links - none of which can be deleted! They're all locked. This makes no sense whatsoever, since there are obviously going to be situations where one might want only two (or even one) item(s) showing. You can set the display on the links to "none", which is a workaround, but not really a proper solution.

If you use the standard Bootstrap Navbar component, you can add additional nav items, but you cannot add a dropdown nav item. You can drag and drop a dropdown button component into the navbar, but it is not the same as the dropdown item in the Navigation Clean component. It does not become part of the li structure or take on the CSS attributes of the other navbar links. There seems to be no way to add the standard Bootstrap dropdown item to the standard Bootstrap navigation component! This is unacceptable!

Then I figured, "okay, what if I just add the appropriate classes and attributes to a standard nav item and turn it into a dropdown item?" This basically worked up until the point that I wanted to OPEN the dropdown to edit it, and realized it's impossible! Even adding the Bootstrap "show" class to the "constructed" dropdown would not cause it to expand. You can construct a dropdown out of a standard nav item, but there is no way to edit any of the links on it. Frustrating!

So basically, we're stuck with either using the dropdown item that is a part of one of the included Navigation bar components, and setting the display to none to "faux-delete" the locked links, or drag a dropdown button into the navigation bar.

Am I missing something fundamental, or is this an accurate assessment?

Inside the li dropdown nav-item you can put "show" on the dropdown-menu div containing the sub-links and it will expand.''

I agree with your statements on removing from three to two is not possible. You would have to recreate using a list to get two and then you lose the built in function of Bootstrap Studio toggle open or close feature for the component.

Well, I managed to finally target the correct element to get the menu to expand, but ran into other problems with caret icons showing all over the place where they shouldn't. I struggled with it for hours and I eventually gave up and opted to use the Navigation Clean component and just set the display to none on the locked menu items. I hate doing ugly work-arounds like that, but until the devs see fit to give us total control over the components, I guess this is what we have to resort to.

I really don't see why we can't have an optional "expert mode" where all components are unlocked by default. It could be buried in somewhere in the design settings, so newbies don't accidentally click it. I know many other power-users have requested something like this before.

So I can add a dropdown to the standard Navbar component. I can delete any Nav Items because they are not locked in the standard Navbar. If I want the Navbar to look like the Navigation Clean Component Navbar I can drop that into the project also and then delete the Navigation Clean html component navbar which leaves the Navigation-Clean.css. I then simply add the class navigation-clean to the standard Navbar and it looks exactly the same.

I think the reason some of the components are locked is that the dev has assigned javascript functions that allow the user to open, close, hide, show things that make a big difference in working with bootstrap layout components. The carousel component is a good example where we have the "slide" which allows us to change the active state to the next slide with the javascipt function the dev has built in to a button.

Thank you for starting this thread! There are two issues here:

  • Navigation Clean's dropdown has locked menu items. This is a problem with that particular component that we weren't aware of. Dropdown items shouldn't be locked. We will fix this in our upcoming release.
  • Dropdowns don't work as expected when dropped in Navbar. This happens because they need to be dropped into the Nav components inside the Navbar, and not in the Navbar directly. In previous versions of Bootstrap Studio we limited what can be dropped in Navbars, so Dropdowns could only be added to the correct parent. But after lots of complaints we removed all restrictions. The best we can do now is to show a "Dropdown" button here. Looking forward to your feedback on this.

Support: Thank you for responding and looking into this issue.

I have put together a Navigation Clean component and shared it online with no locks for all to use. When you release your update I will remove it.

I would expect that this component works very similar to the original with all restrictions released. I am not supporting this component.

Search online components for "Navigation Clean" and use as you will. I don't expect any issues, however, you are on your own.

If there are still issues, please report them to BSS support and wait for the official release.

We just released version 4.5.7 with fixed navigation components, and a toolbar button for quickly adding dropdowns to navbars. Thanks for reporting the issue!

Navbar (Navigation Clean) => Navbar Collapse (#navcol-1) => Nav => Dropdown => ***** *****: Both 'Link' and 'Menu' at these locations show locks. Is this correct? @martin

I did find a small shortcoming with my public Navigation Clean component, that in order to create more menu items under => Dropdown => Menu that I can duplicate the Dropdown, drag the 'Menu Item' under the previous => Dropdown => Menu, and then delete the duplicated Dropdown. I have not found any other shortcomings.

None of my items in Navigation Clean are locked, which I assume is correct and as it should be.

@martin: I am not seeing any real difference between our components and I believe that everything is editable.

Thank you for your quick fix... I am using your solution in lieu of my temporary fix. Thanks again, Pervasive.

I have decided that maybe it’s a good thing I am on vacation when the updates come out lol. You all will have all the bugs worked out by the time I get back! Thanks all for getting them taken care of. :)

I've been wondering why I am answering a lot more questions than usual. I've spent too much time with computers and find myself to be a really bad people person; And the choir said, "Amen!".

It'll be good to have you back from vacation. It will definitely take a load off my weary mind. You were missed!

@PervasiveRichesLLC - I got back to this post late, and I'm assuming you've deleted your online Navigation component because I don't see it when I go to look. I would have liked to see your solution. Did you custom code it, or figure out a way to use the program's components?

The fix by the devs has solved my problem (thanks Martin!) which actually arose because I was trying to build a "mega-menu" without having to use a custom code component. It's not that I don't know how to write the code (I do) but I have this obsessive compulsion to do as much as possible via BSS's tools and components. I guess I like the challenge, and the notion that I can share these creations with others. I'll post my "mega-menu" to the online library when it's finished the way I want it.

@Jo - very funny!

Did you custom code it, No, that'd ruin all the fun.

or figure out a way to use the program’s components? Yes, of course!

Maybe someone can share it with you. Other than the dev's locks and the strange menu items issue, everything else appears 100% the same.

I don't archive much these days.

That's okay, I'm using the program's updated Navbar dropdown successfully.

However, I've run into another problem. Although this may be a Bootstrap limitation. Apparently, you can't nest dropdown menus. I guess it has something to do with the data-toggle attribute (which can't be changed.) If you put a dropdown inside a dropdown, you get unexpected behavior. Clicking the child dropdown closes the parent dropdown. Guess I'll be resorting to custom code after all.

Ahh... I see there is already a multi-level dropdown script in the tutorials section. So this solves my new problem.

Well, I guess that's life, but I wouldn't spend too much time on it:

https://www.bootstrapstudio.io/tutorials/multilevel-dropdowns

okay... I found it an hour ago when I got up to grab a bite to eat, but I spent a little bit of time looking at the solution.

By the time I had posted, you had already posted your reply which I saw after my post.

Anyway, glad you found it.

I've done something a long time ago, it's been a good twenty years and this is what I did.

On the left side of the page I set up a column of dynamically created tabs, the first tab being HOME.

There was never, ever more than one drop-down in use, and its content and position were also dynamic.

Upon clicking on HOME its color would change, the drop-down would load and pop up just to the right.

Upon clicking on HOME again, the drop-down would be hidden and the color reverted.

Upon selecting from the drop-down, it would show in the next dynamically created tab just below the tab that was clicked.

This can be used for all sorts of things, like the "What is it?" animal guessing game, or for a kind of search for e-commerce.

Anyway, after selection all the tabs below would be cleared if there were any. This formed a kind of bread-crumb trail.

Using only one drop-down I was able to go almost infinitely deep, because vertical scrolls can be very, very long.

Everything doesn't have to be dynamic. And what's dynamic can be made static, if the implementation makes sense.

Anyway, have fun.

I have a dropdown nested in a dropdown in a standard navbar component working now for drop right but the dropleft is a little more "witchy" and may take a little time to perfect. Nice to have the auto "OPEN" now though.....thanks Devs.

https://jolly-sea-0041.bss.design/