---
title: "Self-Hiding Navigation Drawer"
---

# Self-Hiding 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](ignition-modules\perspective\perspective-design-tips.md). 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.

## Navigation Drawer

Here's what one might look like on a computer monitor, Menu Item 1 and 2 tabs are visible on the left-hand side of the screen:

![](<self-hiding-navigation-drawer/1-2019-02-20 09_30_53.png>)

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

![](<self-hiding-navigation-drawer/2-2019-02-20 09_36_24.png>)

Only the title and main content for the screen are visible. A menu icon is available in the top left-hand corner to expand menu options as desired.  

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.

:::note
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.
:::

## 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 Root Container Type to **Coordinate**.
3. Click **Create View**.
4. Set the width of the view to **200 pixels**.
5. Drag a MenuTree component onto the Menu View. Configure the component as you would if you were using a standard docked view.

:::note
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.
:::

![](self-hiding-navigation-drawer/3-2020-12-23_14-42-14.png)

### Header Views

Next, we will create our header views. The two views will be set up 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**, and set the Root container Type to **Coordinate**.
    3. Click **Create View**.![](self-hiding-navigation-drawer/4-2020-01-02_14-14-37.png)
    4. Set the height of the view to **75** pixels.
    5. Drag an Icon component onto the upper left side of the view, then click on the component to select it.
    6. In the Property Editor, set the 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](https://fonts.google.com/icons).
    7. Add a title for the header. We used a Label component with the text "All About Navigation!"![](<self-hiding-navigation-drawer/5-2019-02-22 10_07_49.png>)
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** ![](self-hiding-navigation-drawer/exand-icon.png) icon next to the path property then select **HeaderLarge**.![](self-hiding-navigation-drawer/6-2019-03-14_16-31-06-b.png)
    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** ![](self-hiding-navigation-drawer/exand-icon.png) 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 **Perspective** ![](self-hiding-navigation-drawer/perspective-icon.png) 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.![](<self-hiding-navigation-drawer/7-2020-07-20_17-11-13 -b.png>)
2. On the top dock, click the **Add** ![](self-hiding-navigation-drawer/add-icon.png) icon. Select the **HeaderMain** view and click **OK**.![](self-hiding-navigation-drawer/8-2020-07-20_16-43-13.png)
3. Click the **Edit** ![](self-hiding-navigation-drawer/edit-icon.png) icon next to the HeaderMain docked view.
4. In the Configure Docked View menu, set the size to **75**.![](self-hiding-navigation-drawer/9-2020-07-20_16-46-17.png)
5. On the left dock, click the **Add** ![](self-hiding-navigation-drawer/add-icon.png) 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.)![](<self-hiding-navigation-drawer/10-2019-02-20 10_48_35 (1).png>)
6. In the center of the Page Configuration menu, set the Corner Priority to **top-bottom**. The other option won't look quite right.![](self-hiding-navigation-drawer/11-2019-03-15_12-53-47-b.png)

### 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...**.![](self-hiding-navigation-drawer/12-2019-03-15_12-56-21.png)
3. Under Mouse Events, select **onClick**.
4. Next click the **Add** ![](self-hiding-navigation-drawer/add-icon.png) icon to add an action. Select the **Dock** action.![](self-hiding-navigation-drawer/13-2019-03-14_17-01-40.png)
5. This action needs the identifier we created. Set the Dock Action to **Toggle**, and the Identifier to **menu**. Click **OK**.![](<self-hiding-navigation-drawer/14-2019-02-20 11_04_32.png>)

Now you can 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.