Axure Tutorial: Create Multiple-levels Left Nav Bar Menus

Introduction

The left navigation bar menu is a commonly used Axure widget in backend website or app. It can be created quickly through the dynamic panel.

Features to be Realized

Click the level 1 menu of the Left Nav Bar on the left to toggle the expand / collapse of the level 2 menus.

How to Realize these Features

This is achieved by setting the dynamic panel to next state and pushing and pulling the widgets below.

Pre-Requisite

Master the use of dynamic panel.

Preview the completed prototype for this tutorial

Widgets setup

1. Drag three rectangles into the canvas. One of them is the Level 1 menu and the other two are the Level2 menus. The Level 1 menu is named Level 1 menu and the Level 2 menus are named Level 2 menu.

Set Expand/Collapse Interaction

1.Create all menus as dynamic panels. Add state 2 and copy the level 1 menu to state 2.

2. Set the interaction when clicking the first level menu. When clicking the first level menu in state 1, the dynamic panel will move to the next state and push the widgets below.
3. Copy the interaction of the level 1 menu in state 1 to the level 1 menu in state 2.

Create and Edit Other Menus

1. Copy menus we created.
2. Edit new created menus.

3. Complete the creation and editing of all menus in the left nav bar.

Style The Menus and Make a Left Nav Bar

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

Note: Click here to download the completed RP 10 file for this tutorial.

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store