How to create a working "Vertical TabList Menu" with CommonUI?

Hey fellas, I have a greate challange for ya!

How can I create a “Vertical TabList Menu” with CommonUI? Like in the following picture:

Using:

  • “CommonTabListWidgetBase” for the TabList
  • “CommonActivateableWidgetSwitcher” for the different “CommonActivateableWidgets”

Functionalities:

  • Pressing “Confirm”, e.g. Enter on Keyboard or Bottom ActionButton on Gamepad should set the Focus to the ActiveTab’s Widget
  • Pressing “Back”, e.g. ESC on Keyboard or Right ActionButton on Gamepad should bring you back to the TabList

I am currently struggling with the different focus setups…Hope someone has done this before and can tell me at lest that this is possible in some way.

Btw., the listet components above are no Must-Have criteria, but at least the default CommonUI functionallities should be used (no exotic ways like C++ please).

Hi @MythoByteWorks ,
Yes, it’s definitely possible to create a vertical TabList menu using CommonUI. I did some research and found these videos that explain how to implement it step by step.

First of all you need to enable the “Common UI” plugin in your project settings before getting started. To do this, go to Edit > Plugins, search for “Common UI” in the search bar, and enable it by checking the corresponding box


This is a Complete Guide to Inputs and Widgets :

This one explains how to Understand Common Ui Tab List:

This one shows examples of a pre-built TabList and how to create a Tabbed Menu :

With these resources, you can achieve exactly what you’re looking for using only Blueprints, fully taking advantage of CommonUI’s functionality, no need for C++ haha
Hope it helps!

(post deleted by author)

Unfortunately, the first TabList example you provided only shows how to create a Horizontal TabLists… and the second one isn’t even a CommonUI example.

I already watched most of the available videos regarding creating TabLists with CommonUI on youtube. But none of them provide any example on how to create a “full working Vertical TabList Menu”. Even worse, they do only show the creation and setup of the TabList, but not the part where I can navigate through the individual, focusable widget-elements (e.g. buttons) of the current active widget of the WidgetSwitcher. The videos I have seen are all just showing the TabList part (setup and creation).

My goal is to create a “Settings” Widget where the user can navigate with the gamepad (!) through the TabList (Controls, Graphics, Audio) and change the game settings in there.