MenuBar

MenuBar is used to create a menu at the top of the window, like in many desktop applications.

Example menus:

• File
• Edit
• View
• Help

Each Menu contains MenuItems.

Example: Simple Text Editor Menu

This example contains:

• A File menu
• An Edit menu
• A Help menu
• A text area
• Actions for menu items

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SeparatorMenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane xmlns="http://javafx.com/javafx/17"
            xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="org.example.demo.HelloController">

    <top>
        <MenuBar fx:id="menuBar">

            <Menu text="File">
                <items>
                    <MenuItem text="New"
                              onAction="#newFile"/>

                    <MenuItem text="Open"
                              onAction="#openFile"/>

                    <MenuItem text="Save"
                              onAction="#saveFile"/>

                    <SeparatorMenuItem/>

                    <MenuItem text="Exit"
                              onAction="#exitApplication"/>
                </items>
            </Menu>

            <Menu text="Edit">
                <items>
                    <MenuItem text="Clear Text"
                              onAction="#clearText"/>

                    <MenuItem text="Insert Example"
                              onAction="#insertExample"/>
                </items>
            </Menu>

            <Menu text="Help">
                <items>
                    <MenuItem text="About"
                              onAction="#showAbout"/>
                </items>
            </Menu>

        </MenuBar>
    </top>

    <center>
        <TextArea fx:id="textArea"
                  promptText="Write something here..."/>
    </center>

    <bottom>
        <Label fx:id="statusLabel"
               text="Ready."
               BorderPane.alignment="CENTER"/>
    </bottom>

</BorderPane>

Controller

package org.example.demo;

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;

public class HelloController {

    @FXML
    private TextArea textArea;

    @FXML
    private Label statusLabel;

    @FXML
    private void newFile() {
        textArea.clear();
        statusLabel.setText("New file created.");
    }

    @FXML
    private void openFile() {
        statusLabel.setText("Open file clicked.");
    }

    @FXML
    private void saveFile() {
        statusLabel.setText("Save file clicked.");
    }

    @FXML
    private void exitApplication() {
        Platform.exit();
    }

    @FXML
    private void clearText() {
        textArea.clear();
        statusLabel.setText("Text cleared.");
    }

    @FXML
    private void insertExample() {
        textArea.setText("""
                JavaFX MenuBar Example

                - File Menu
                - Edit Menu
                - Help Menu
                """);

        statusLabel.setText("Example text inserted.");
    }

    @FXML
    private void showAbout() {

        Alert alert = new Alert(Alert.AlertType.INFORMATION);

        alert.setTitle("About");
        alert.setHeaderText("JavaFX MenuBar Example");
        alert.setContentText("""
                This program demonstrates how to use:
                - MenuBar
                - Menu
                - MenuItem
                """);

        alert.showAndWait();
    }
}

What happens?

When the user clicks:

File -> New

The newFile() method is called:

textArea.clear();

When the user clicks:

Help -> About

An information window appears.

Example with keyboard shortcuts

You can add shortcuts like:

• Ctrl + N
• Ctrl + S

<MenuItem text="New"
          onAction="#newFile">
    <accelerator>
        <KeyCodeCombination code="N" control="DOWN"/>
    </accelerator>
</MenuItem>

For this, add:

<?import javafx.scene.input.KeyCodeCombination?>

Another example:

<MenuItem text="Save"
          onAction="#saveFile">
    <accelerator>
        <KeyCodeCombination code="S" control="DOWN"/>
    </accelerator>
</MenuItem>

Example with check menu item

<?import javafx.scene.control.CheckMenuItem?>

<CheckMenuItem text="Dark Mode"
               onAction="#toggleDarkMode"/>

Controller:

@FXML
private void toggleDarkMode(ActionEvent event) {

    CheckMenuItem item = (CheckMenuItem) event.getSource();

    if (item.isSelected()) {
        statusLabel.setText("Dark mode enabled.");
    } else {
        statusLabel.setText("Dark mode disabled.");
    }
}

Important classes

MenuBar
Menu
MenuItem
SeparatorMenuItem
CheckMenuItem
RadioMenuItem

Useful methods

menuItem.setDisable(true);
menuItem.setText("Save As");
menu.getItems().add(new MenuItem("Print"));