A menu widget provides a list of items which are associated with some contents. At any time one item is selected from the list.

A WMenu works in conjunction with a WStackedWidget, which manages the contents.

The panel at the left is implemented using a WMenu.

Example
source
#include <Wt/WBreak.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WMenu.h>
#include <Wt/WStackedWidget.h>
#include <Wt/WTextArea.h>

auto container = std::make_unique<Wt::WContainerWidget>();

// Create a stack where the contents will be located.
auto contents = std::make_unique<Wt::WStackedWidget>();

Wt::WMenu *menu = container->addNew<Wt::WMenu>(contents.get());
menu->setStyleClass("nav nav-pills flex-column");
menu->setWidth(150);

// Add menu items using the default lazy loading policy.
menu->addItem("Internal paths", std::make_unique<Wt::WTextArea>("Internal paths contents"));
menu->addItem("Anchor", std::make_unique<Wt::WTextArea>("Anchor contents"));
menu->addItem("Stacked widget", std::make_unique<Wt::WTextArea>("Stacked widget contents"));
menu->addItem("Tab widget", std::make_unique<Wt::WTextArea>("Tab widget contents"));
menu->addItem("Menu", std::make_unique<Wt::WTextArea>("Menu contents"));

container->addWidget(std::move(contents));

You can create items with submenus by using the WSubMenuItem rather than the default WMenuItem.

A menu has full support for bookmarks and the back button, by rendering its items using WAnchor and making use of internal paths.

By default, the menu does not provide any styling. It can be rendered using HTML <ul> and <li> elements. It should be styled using CSS. The look and behaviour of menu items can be customized by just reimplementing the styling. For example, the WTabWidget is merely a specialized menu. By default the nav class from the Bootstrap theme is applied.

Top