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 
  void NavigationBar() {
    WContainerWidget container = new WContainerWidget();
    WNavigationBar navigation = new WNavigationBar((WContainerWidget) container);
    navigation.setResponsive(true);
    navigation.addStyleClass("navbar-light bg-light");
    navigation.setTitle("Corpy Inc.", new WLink("https://www.google.com/search?q=corpy+inc"));
    WStackedWidget contentsStack = new WStackedWidget((WContainerWidget) container);
    contentsStack.addStyleClass("contents");
    WMenu leftMenu = new WMenu(contentsStack);
    final WMenu leftMenu_ = navigation.addMenu(leftMenu);
    WText searchResult = new WText("Buy or Sell... Bye!");
    final WText searchResult_ = searchResult;
    leftMenu_.addItem("Home", new WText("There is no better place!"));
    leftMenu_
        .addItem("Layout", new WText("Layout contents"))
        .setLink(new WLink(LinkType.InternalPath, "/layout"));
    leftMenu_.addItem("Sales", searchResult);
    leftMenu_.addStyleClass("me-auto");
    WLineEdit editPtr = new WLineEdit();
    final WLineEdit edit = editPtr;
    edit.setPlaceholderText("Enter a search item");
    edit.enterPressed()
        .addListener(
            this,
            () -> {
              leftMenu_.select(2);
              searchResult_.setText(new WString("Nothing found for {1}.").arg(edit.getText()));
            });
    navigation.addSearch(editPtr);
    WMenu rightMenu = new WMenu();
    WMenu rightMenu_ = navigation.addMenu(rightMenu);
    WPopupMenu popupPtr = new WPopupMenu();
    WPopupMenu popup = popupPtr;
    popup.addItem("Contents");
    popup.addItem("Index");
    popup.addSeparator();
    popup.addItem("About");
    popup
        .itemSelected()
        .addListener(
            this,
            (WMenuItem item) -> {
              final WMessageBox messageBox =
                  new WMessageBox(
                      "Help",
                      new WString("<p>Showing Help: {1}</p>").arg(item.getText()),
                      Icon.Information,
                      EnumSet.of(StandardButton.Ok));
              messageBox
                  .buttonClicked()
                  .addListener(
                      this,
                      () -> {
                        if (messageBox != null) messageBox.remove();
                      });
              messageBox.show();
            });
    WMenuItem item = new WMenuItem("Help");
    item.setMenu(popupPtr);
    rightMenu_.addItem(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