You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.


Navigation Drawer

A navigation drawer is a special type of docked menu, usually appearing on the left side of a session. What makes a navigation drawer special is its responsive design. On smaller devices, this docked menu can hide itself and pop out when the user needs it. These drawers have become ubiquitous in User Interface (UI) design, particularly in apps. 

Here's what one might look like on a computer monitor:

Here's what one might look like on a mobile device:

  

As the screen becomes smaller, the menu is hidden and an icon appears in the top left to allow us to toggle its visibility. This particular navigation drawer will probably need about 200 pixels horizontally, which on a desktop is fine, but on a mobile device takes up too much of the screen.

This guide assumes a bit of knowledge about how views and components work. Please see those sections of this manual for more information as needed.


On this page ...


Configuring a Navigation Drawer

The following example walks through how to configure this self-hiding navigation drawer. There is no mention of setting up the Menu Tree or any content pages, it is strictly a guide to show you the layout type.

Navigation View

  1. In the Project Browser, right click on Views and click New View. 
  2. Name the view Menu View and set the layout to Coordinate. This is where you'll put the navigation menu. Click Create View.
  3. Set the width of the view to 200 pixels.

  4. Drag a MenuTree component onto the Menu View. Configure the component as you would if you were using a standard docked view.

    Tip: You can set the root of the Menu View to use the Percent Mode. This way it is easy to make the Menu Tree fill all the space.

Header Views

Next, we will create our header views. The two views will be setup in a breakpoint container, which will swap between a small header with an icon, and a big header without one.

  1. Create a small header view for our mobile UI.
    1. In the Project Browser, right click on Views and click New View. 

    2. Name the new view HeaderSmall, with a layout of Coordinate. Click Create View.

    3. Set the height of the view to 75 pixels.
    4. Drag an Icon component onto the upper left side of the view, then click on the component to select it. 
    5. In the Property Editor, its path property to material/menu. You can of course use whatever icon you'd like; a list of all the icons in the material folder can be found here. 
    6. Add a title for the header. We used a Label component with the text "All About Navigation!"   



  2. Create a large header view for our desktop UI
    1. Create another view called HeaderLarge, again with a layout of Coordinate. 
    2. Set the height to 75 pixels. 
    3. Don't add the icon to this one, but add the same Label as above.

  3. Finally, create a breakpoint view to toggle between them.
    1. Create a view called HeaderMain with a layout of Breakpoint. 
    2. Set the height to 75 pixels.
    3. In the Property Editor, click on Large (under Children).
    4. Drag an Embedded View component on the HeaderMaster view.  
    5. Under PROPS, click on the Expand  icon next to the path property then select HeaderLarge.



    6. Now we'll do the same for the small child of this Breakpoint container.  In the Property Editor, click on Small (under Children).
    7. Drag an Embedded View component on the HeaderMain view.  
    8. In the Property Editor, click on the Expand  icon next to the path property then select HeaderSmall.  

Page Setup

Now that we have our header and menu views, we need to set up our pages to display the views properly.

  1. Click on the Settings  icon in the bottom left of the designer to access the Page Configuration menu. Select Shared settings. We're going to add our two docked views here, so they show up on every page.



  2. On the top dock, click the Add  icon. Select the HeaderMain view and click OK. 



  3. Click the Edit  icon next to the HeaderMain docked view. 
  4. In the Configure Docked View menu, set the size to 75.



  5. On the left dock, click the Add  icon. Add the Menu View and set the following:
    Size: 200
    Display: Auto  (This enables us to configure a breakpoint below)
    Autobreakpoint: 640 (This is the same width that the breakpoint container on the HeaderMaster view is using)
    Dock Id: menu (This will be used in our dock action on the menu icon to toggle the menu.)



  6. In the center of the Page Configuration menu, set the Corner Priority to top-bottom. The other option won't look quite right.  



Configure Menu Icon

Now we need to configure the menu icon we created on HeaderSmall to pull up Menu View. 

  1. Open the HeaderSmall View. 
  2. Right-click on the Icon component, and select Configure Events...



  3. Under Mouse Events, select onClick. 
  4. Next click the Add  icon to add an action. Choose a Dock action. 



  5. This action needs the identifier we created in step 9. Set the Dock Action to Toggle, and the Identifier to menu. Click OK.


Now go test it out! It's easiest to open a browser on your desktop and change the size to toggle between the different views.

Using this strategy, you can configure a navigation drawer in combination with any basic navigation component or method.



  • No labels