How to use hamburger menu widget in my project?

BigBen

Hi.
I recently found this project on GitHub for a hamburger menu implementation:
https://github.com/chrisaverage/burger-menu.

However, I am not able to understand how I can add this to my existing project so that I am able to add a hamburger menu in my existing project UI.

JonB

@BigBen
It's simply a QPushButton and a QMenu. So add the .cpp & .h to your project and create instances of the classes, putting them on your UI, from code (not Designer, unless you really want to Promote, which does not seem worth the hassle). There is also an example folder there, showing it used in a standalone program.

BigBen

@JonB Thank you. I am able to add the widget to my existing UI now.

However, I am having trouble placing it at an appropriate location in my existing layout which I created using the designer.
My central widget has a grid layout. I want to add this burgermenu to this grid layout, and it should start from the top left, and take all the space till the bottom of the application window.

Illustrated below:

What I have:

In the above image, everything is in a grid layout (centralwidget has a grid layout). I want to add the menu to this layout itself, as in the image below:

What I want:

JonB

@BigBen
I am not a UI expert, so perhaps someone else will say better/how, but I believe you do this via https://doc.qt.io/qt-6/qmainwindow.html#creating-toolbars with Qt::LeftToolBarArea.

Chris Kawa

There's couple options to do that:

Use the designer plugin provided with the project and just drag&drop the burger widget where you want it in the layout.
In the designer Drag&drop a plain empty widget to where you want the burger menu to be and then promote it to the BurgerMenu class.
From code use QGridLayout::addWidget with a rowSpan value of -1 so that it covers two cells vertically. Note that if you have an existing designer generated layout then cell 0x0 will already be occupied by one of the labels, so you can either move the labels to the right, leave an empty column in the designer so you can fill it from code or just do everything from code.
...or cheat a little and do what @JonB suggested to add the burger as a mainwindow's toolbar outside of your layout.

I think option 2 is the easiest if you already have a working layout made in the designer.

BigBen

@Chris-Kawa Thank you for the options.
I decided to go ahead with the second option. I was able to promote a widget to the burger menu.

However, after promotion, I cannot see any interface of the menu (It is completely white/empty).

I am able to locate the hamburger button by running my mouse over the screen because of the hover effect, but there is nothing else visible.

If I am not wrong, I have to use the addBurgerIcon, addMenuAction functions to add whatever buttons, I want to the menu, right?

My question however is that, how can I define the triggered slot for each of the buttons/actions I add to the menu? For example, I add an action called 'Folders', then how can I define a slot specifically for this action, to describe what should happen when it is clicked. Something like on_actionName_triggered() , where 'actionName' is the name of the action.

Chris Kawa

Since applications using burger menus usually have a very distinctive style I didn't want to make any assumptions. The look of the menu is up to you to style, it only implements the functionality. Same goes for the burger icon, you can set it to whatever you want, either the one included in the project or your own. There's an example in the repo showing how to style it.

As for actions - you can add an existing QAction or let the widget create one for you using any of the overloads of addMenuAction. In any case it returns a QAction* and you can connect to its triggered signal just as you would with any other action in the built-in Qt menus. Alternatively you can tag these actions in any way you want and only make a single connection to the BurgerMenu::triggered signal. You will get an action that was triggered as a parameter.
One way to tag an action is by using QAction::setData or you can just store the action pointers somewhere when creating them and identify the action by the pointer, text, some property or whatever fits you.

on_actionName_triggered() looks like a slot name created for the the auto-connection feature. If you want to use it you can do that too (although I wouldn't reccomend it). Just create your actions in the designer via its action editor and make your slots names match, just like you would with any normal menus/actions. The only caveat is that you need to manually add these actions to the menu from code, as there's no way to do that in the designer, but that's not a huge problem.

So those are a couple of the most straightforward options out of couple more. It's deliberately left very flexible so you can use it however fits your overall application design best.