Navigation drawer provides an intuitive way to keep main navigation controls of the UI clean. The drawer will only be made visible to the user on certain actions like button click so that we can make use of that space for much more important things yet keeping controls reachable with single click.

Android introduced the material design Navigation bar or side pane or whatever you call, with its Material design goodness. JFoenix library provides JFXDrawer component.

Today, I will be showing how to implement the Navigation drawer on your JavaFX application using JFoenix material design library. If you want some help on setting up the JFoenix material design library, see my post JavaFX Material Design : Setting Up and Making Login Application.

I have made a video to make things more clear. You can watch it right here.

 

If you are the kind of person who do not like to watch tutorial videos, read from here. I will explain it step by step.

Step 1 : Design Content For Navigation Drawer 

At first, you have to create an FXML layout for the Navigation bar itself. This layout can then be inflated to the navigation bar holder later. The above image shows a pretty simple VBox layout that consists of 4 Buttons and one image view. This content can the be loaded to a VBox variable in our code (from the main controller) using the following code

VBox box = FXMLLoader.load(getClass().getResource("SidePanelContent.fxml");
Step 2 : Design The Container (Main) Window
Main window with Hamburger
Main window with Hamburger

Now we  have the navigation bar content. In this step, you have to design the main application window. The JFXDrawer can be added using scene builder by drag and drop. Once you position the drawer on the space you want, you can set the drawer direction to LEFT, RIGHT, TOP or BOTTOM from the Properties section of Scene Builder.

I have added a JFXHamburger for material design look and feel. I have thouroughly explained how to use JFXHamburger in this video https://www.youtube.com/watch?v=rCnPY9Kj4J0 . If you don’t like to have a Hamburger, you can use a simple button. Add an action listener to your button and add this code.
@FXML
//Accessing FXML Element
JFXDrawer drawer;
//Add this in ActionListener
if(drawer.isShown())
drawer.close();
else
drawer.open();

The navigation drawer can be made visible by using the open() method. It can be made invisible through the function call close().

Step 3 : Setting the content of Drawer

Now we have two separate components. The Drawer and Main window. We can attach the box loaded in step 1 to our drawer in main window using the following code.

drawer.setSidePane(box);
Step 4 : There is no 4th step. You are done !
I used to get happier when things get completed sooner that expected. That’s why there is a step 4 🙂
Run the code now. When you click on your button or Hamburger,you should see the navigation drawer like this. If you have some alignment issues for the drawer, increase the value of “Default Drawer Size” from the Scene Builder.
Download Sample Project
Download Sample Project

 

 

 

Recently, as part of library management software tutorial, I have created more elaborate tutorial about creating Navigation Drawer. It contains more complex buttons with icons and CSS styling. Watch those tutorial videos from the following link.

  1. Designing The Drawer
  2. Attaching drawer to Dashboard
  3. Handling Button Click Events

SHARE

Friends call me Villan (Yeah, that’s my name). I am from Kerala, India. Studied Computer Science and Engineering. Love programming and spends free time on experimenting with new programming languages and things. Happy blogger and YouTuber.

  • I'm trying to implement an application using this drawer sample as the main navigation panel. But there is the drawer overlay blocks the nodes underneath it to receive mouse events, please assist.

  • I have read your blog its very attractive and impressive. I like it your blog.

    Java Training in Chennai Core Java Training in Chennai Core Java Training in Chennai

    Java Online Training Java Online Training Core Java 8 Training in Chennai Core java 8 online training JavaEE Training in Chennai Java EE Training in Chennai

  • Hello genuinecoder i like you channel in YouTube and i havê a question about jFXDrawer Frist question is how i put new anchor Pane and edit this anchor pane inside Drawer?

  • Like a google Play

  • Like a google play navigation

  • Michel Escalante Alvarez

    Hello, I would like to know how I could implement a menu that works like the Navigation Drawer but, instead of showing and hiding, it appears as a fixed graphical element of the UI. For example, the JFXListView that is inside the red rectangle in the image.
    Greetings and congratulations for this great tutorial. https://uploads.disquscdn.com/images/07223921a8fa3ba308e7b0fe79d31da72320a06ea4294ac3e4aa93d3e316a0e8.png

    • Prakaash M

      Add
      drawer.open(); in try block

  • Yessi Loukou

    I downloaded your source code, but when I run it I encounter this error.

    Exception in Application start method

    java.lang.reflect.InvocationTargetException

    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:483)

    at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:363)

    at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:303)

    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)

    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

    at java.lang.reflect.Method.invoke(Method.java:483)

    at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)

    Caused by: java.lang.RuntimeException: Exception in Application start method

    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:875)

    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$147(LauncherImpl.java:157)

    at com.sun.javafx.application.LauncherImpl$$Lambda$48/501263526.run(Unknown Source)

    at java.lang.Thread.run(Thread.java:745)

    Caused by: java.lang.NullPointerException: Location is required.

    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3201)

    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3169)

    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3142)

    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3118)

    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3098)

    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3091)

    at naivgationdrawer.NaivgationDrawer.start(NaivgationDrawer.java:13)

    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$153(LauncherImpl.java:821)

    at com.sun.javafx.application.LauncherImpl$$Lambda$51/1897796217.run(Unknown Source)

    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$166(PlatformImpl.java:323)

    at com.sun.javafx.application.PlatformImpl$$Lambda$44/1267032364.run(Unknown Source)

    at com.sun.javafx.application.PlatformImpl.lambda$null$164(PlatformImpl.java:292)

    at com.sun.javafx.application.PlatformImpl$$Lambda$47/1535361598.run(Unknown Source)

    at java.security.AccessController.doPrivileged(Native Method)

    at com.sun.javafx.application.PlatformImpl.lambda$runLater$165(PlatformImpl.java:291)

    at com.sun.javafx.application.PlatformImpl$$Lambda$45/96639997.run(Unknown Source)

    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)

    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)

    at com.sun.glass.ui.win.WinApplication.lambda$null$141(WinApplication.java:102)

    at com.sun.glass.ui.win.WinApplication$$Lambda$37/1051754451.run(Unknown Source)

    … 1 more

    Exception running application naivgationdrawer.NaivgationDrawer

    C:UsersYESSI PACDownloadsJFXDrawerNaivgationDrawernbprojectbuild-impl.xml:1051: The following error occurred while executing this line:

    C:UsersYESSI PACDownloadsJFXDrawerNaivgationDrawernbprojectbuild-impl.xml:805: Java returned: 1

    BUILD FAILED (total time: 4 seconds)

  • Suranjith Nishalaka

    how to set hamburger icon on the drawer pane? and i want to set when drawer pane working left side to right side, main anchor pane also go left and right sides?