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 hsould 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!