How to Build a B‑Side Left Navigation Menu in Axure – Step‑by‑Step Guide

Step 1: Create the secondary‑menu container

Drag a rectangle onto the Axure canvas to serve as the left‑side menu container. Set the following style properties:

Width: 240 px, Height: 470 px Align left with a left margin of 50 px Stroke color: #DCDEE2, stroke width: 1, visibility: right Place the rectangle at the bottom layer of the canvas

Step 2: Build secondary menu items

Style

For each secondary item (e.g., “User Management”), drag a rectangle into the container and apply:

X position and width must exactly match the container (width 240 px), height 38 px Stroke color: #DCDEE2, stroke width: 1, visibility: right Left margin 42 px and left‑aligned text label

Because the item shares the same X coordinate and width as the container, its right border overlaps the container’s border, creating the visual effect of a border‑less secondary item.

Interaction styles

Hover : rectangle fill #F0FAFF, font color #2B85E4 Selected :

Fill color: #F0FAFF Font color: #2B85E4 Stroke color: #2B85E4 Stroke width: 2 (thicker than the unselected state)

Stroke type: solid, visibility: right

Clicking a secondary item sets its "selected" state to true.

Step 3: Define an option group for secondary items

Duplicate the “User Management” rectangle twice, rename the copies to “Role Management” and “Menu Management”, then select all three and set them as an option group . Mark “User Management” as the default selected item.

Step 4: Create the primary “System Management” menu

Style

Text label: "System Management", left‑aligned, left margin 50 px Width 240 px, Height 48 px (same width as secondary items)

Stroke color: #DCDEE2, stroke width: 1, visibility: right Place a system‑settings icon and a right‑arrow icon (e.g., from Iconfont) next to the label

Interaction

Hover: font color #2D8CF0, icon fill #2D8CF0 Selected: same colors as hover

Group the icons with the primary rectangle and configure internal component mouse‑over interactions so that hovering or selecting the rectangle also updates the icons.

Step 5: Convert the primary menu and its secondary items into a dynamic panel

Select the primary menu rectangle, its icons, and the three secondary items, then choose Convert to Dynamic Panel . Duplicate the panel state, rename the states (e.g., "Collapsed" and "Expanded"), and reorder them so that the expanded state is first.

Add a click event to the primary menu group that toggles between the collapsed and expanded states.

Step 6: Duplicate the dynamic panel for an “Order Management” primary menu

Copy the entire “System Management” dynamic panel.

Rename the panel, the primary menu group, the primary label, and the secondary items to reflect “Order Management”.

Set the "Collapsed" state of the new panel as the default, ensuring only one primary menu is expanded at a time.

Step 7: Adjust interaction events for exclusive expansion

To prevent a previously expanded primary menu from collapsing when another primary menu is clicked, add a click event to each primary menu that collapses all other secondary menus before expanding its own.

After these steps, the Axure prototype contains a fully functional two‑level left navigation where only one primary section expands at a time, and secondary items respond to hover and selection with visual feedback.