Vertical menu in wappler?

how can i do a vertical menu aligned to the right in wappler?

Like this one:

Use the Bootstrap Nav and under the Flex Flow select the Direction Vertical.


Thank you @patrick. That option is available on the basic version of Wappler, or pro?

Navigation are part of the basic version indeed.

But in any case all components and possibilities are visible in the insert elements menu, when there is a license restriction you will just see a tag above the element name indicating that.

So if you just don’t see the bootstrap nav it might be because you are trying to insert it in the wrong place of because it needs a container.

Hi @patrick, I’m trying to make the vertical menu, but i’m just starting exploring wappler.

I added a bootstrap4 CDN (i have no idea what is the difference all the bootstrap from basic wappler.) and i added a container and inside the container the full Navbar. Its not working… I suppose i should add another container and they should be side by side.

What exactly do you mean by it's not working? Generally inside a container you will have a row and a column with your Navbar inside that.

This is what I’m having now:

1 Like

interesting question! Watching that topic!

Hi Andre, is it possible to provide an example of what exactly do you need to achieve and what’s wrong in the screenshot you provided?

Something like this:

Content on the left and menu on the right.

Ok, thanks - that requires a bit of hand coding. The standard navigation included in Bootstrap 4 does not support this out of the box.

You could get semi close.

  1. Create a new page
  2. Add Framework App Connect
  3. Add Framework Bootstrap 4 cdn
  4. Add Container
  5. Add Row inside Container
  6. Add Column Inside Row
  7. Duplicate Column

So now you have a container with a row inside it and 2 columns inside the row.

Select the right hand column and go to its properties to find Layout, use the slider to make it a size of 2.
Insert inside the column Navigation > Full Navbar
In the App Structure Select Navbar, find the Flex Flow properties and click Direction Verticle

Arrow out the Navbar in the App Structure and select Navbar Nav, find the Flex Flow properties and click Direction Verticle

Here is a quick sample of what i made in less than a minute, it is not as fancy as your sample but it gets you somewhere.

1 Like

Thank you @psweb I will give it a try.

And can I change the menu navigation to get close to the example? If you click the arrow for the sub menu, instead of a drop down, it substitute the menu for the submenu with a back button (arrow)

With quite a bit of fiddling around yes you could get that working, but not with just the standard navbar component, as @Teodor stated that navigation is not part of the standard Bootstrap 4 Framework.

I will take another look in a few minutes and see if I can help you get a little closer to that sort of result,

I have done something similar here, menu on left, content on right:
Its still a work in progress and the menu is not a NAV item. I hope you can figure out from the HTML code.
I will be updating the UI with NAV soon. Plan to post here when done.

Left column CSS

@media (min-width: 576px) {
#columnNav {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;

Right column classes:
offset-0 offset-sm-3 col-sm-9

Sorry @Andre, I am not even getting close to that, you are going to need someone with far better CSS skills than mine to get that navigation while at the same time keeping it as proper navigation that will work still with active states etc when switching from page to page.
Not much point in me cheeting it to look right when in fact it will not really be right.

Sorry, lets hope someone else takes on the challenge.

Thank you guys for the help.

I’m getting there:

I’m not sure what is the best practice for the structure. Is best to have everything inside containers?

@nshkrsh, Did you found a way to make the submenus on vertical menu?