A navigation bar is a widget that organizes contents in window- or application-specific drop down menus which are grouped in a parent menu. Usually, it is anchored to the top of the screen or a window.

A WNavigationBar consists of one or more WMenu controls - each working in conjunction with a WStackedWidget to manage its contents. You can still add other kind of widgets to the navigation bar with addWidget(). It is similar to WTabWidget but it has more features like a title and multiple menus in addition to a more extensive style class.

In the example below, the title and an optional link is set with the method setTitle().

Especially for mobile applications, you can make the navigation bar responsive to the available screen size with setResponsive(). You can see the effect by resizing the window size of your browser.

Use addMenu() to add a menu to the navigation bar, e.g. a menu for contents on the left side of the navigation bar and a right menu for help. You could also add a search widget with addSearch(). Note that if you add several widgets to the right then they are placed from right to left.

Example
Corpy Inc.
There is no better place!
source 
#include <Wt/WLineEdit.h>
#include <Wt/WMenu.h>
#include <Wt/WMessageBox.h>
#include <Wt/WNavigationBar.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPopupMenuItem.h>
#include <Wt/WStackedWidget.h>
#include <Wt/WText.h>


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

// Create a navigation bar with a link to a web page.
Wt::WNavigationBar *navigation = container->addNew<Wt::WNavigationBar>();
// It's not necessary to do this with WBootstrap5Theme, but we include it if
// you want to use another theme.
navigation->setResponsive(true);
// WBootstrap5Theme applies no color scheme by default, so we have to add them here.
navigation->addStyleClass("navbar-light bg-light");
navigation->setTitle("Corpy Inc.",
                     "https://www.google.com/search?q=corpy+inc");

Wt::WStackedWidget *contentsStack = container->addNew<Wt::WStackedWidget>();
contentsStack->addStyleClass("contents");

// Setup a Left-aligned menu.
auto leftMenu = std::make_unique<Wt::WMenu>(contentsStack);
auto leftMenu_ = navigation->addMenu(std::move(leftMenu));

auto searchResult = std::make_unique<Wt::WText>("Buy or Sell... Bye!");
auto searchResult_ = searchResult.get();

leftMenu_->addItem("Home", std::make_unique<Wt::WText>("There is no better place!"));
leftMenu_->addItem("Layout", std::make_unique<Wt::WText>("Layout contents"))
    ->setLink(Wt::WLink(Wt::LinkType::InternalPath, "/layout"));
leftMenu_->addItem("Sales", std::move(searchResult));
leftMenu_->addStyleClass("me-auto");

// Add a Search control.
auto editPtr = std::make_unique<Wt::WLineEdit>();
auto edit = editPtr.get();
edit->setPlaceholderText("Enter a search item");

edit->enterPressed().connect([=] {
  leftMenu_->select(2); // is the index of the "Sales"
  searchResult_->setText(Wt::WString("Nothing found for {1}.")
                                 .arg(edit->text()));
});

navigation->addSearch(std::move(editPtr));

// Setup a Right-aligned menu.
auto rightMenu = std::make_unique<Wt::WMenu>();
auto rightMenu_ = navigation->addMenu(std::move(rightMenu));

// Create a popup submenu for the Help menu.
auto popupPtr = std::make_unique<Wt::WPopupMenu>();
auto popup = popupPtr.get();
popup->addItem("Contents");
popup->addItem("Index");
popup->addSeparator();
popup->addItem("About");

popup->itemSelected().connect([=] (Wt::WMenuItem *item) {
    auto messageBox = popup->addChild(
            std::make_unique<Wt::WMessageBox>
            ("Help",
             Wt::WString("<p>Showing Help: {1}</p>").arg(item->text()),
             Wt::Icon::Information,
             Wt::StandardButton::Ok));

    messageBox->buttonClicked().connect([=] {
        popup->removeChild(messageBox);
    });

    messageBox->show();
});

auto item = std::make_unique<Wt::WMenuItem>("Help");
item->setMenu(std::move(popupPtr));
rightMenu_->addItem(std::move(item));

Remark

In some cases, you may want to add a form field to the navigation bar (e.g. for a compact login option) with addFormField().

Top