← All Guides

The Sidebar

The sidebar is where you choose your tools, shapes, and materials. It sits to the right on desktop and along the bottom on mobile. You can resize it, collapse it entirely, reorder its sections into any layout you prefer, or hide just the categories you're not using — which matters a lot when you're deep into a build and want to reduce how much of the viewport it covers.

Resizing the Sidebar

A thin drag handle runs along the inner edge of the sidebar (the left edge on desktop, the top edge on mobile). Drag this handle to change how wide (or tall) the sidebar is:

• Desktop: drag left to make it wider, right to make it narrower.
• Mobile: drag up to make it taller, down to make it shorter.

Making the sidebar wider gives you more material swatches visible at once without scrolling. Making it narrower gives the viewport more room. The sidebar remembers its size between sessions.

Minimising the Sidebar

Click (rather than drag) the same resize handle to collapse the sidebar completely. This gives you a full, unobstructed viewport — useful when you want to step back and look at your build without anything in the way, or when taking a screenshot.

Click the handle again (it'll be a thin strip at the screen edge) to restore the sidebar to its previous size. This works identically on desktop and mobile — only the direction of collapse differs.

Scrolling the Sidebar

When the sidebar contains more content than fits on screen, it scrolls independently of the viewport. Scrolling the sidebar will not zoom or orbit the main view:

• Desktop: hover the cursor over the sidebar and use the mouse wheel or trackpad scroll.
• Mobile: swipe up or down with one finger while touching the sidebar area.

The sidebar and the viewport are completely separate scroll regions — you can scroll through material options without accidentally moving the camera.

Reordering Sections

Every section in the sidebar — Tool, Shape, Material, Grid Size, and so on — can be dragged into any order you prefer. Hover over a section heading to reveal a small drag handle on the right side of the heading row, then drag it to a new position. A coloured line shows where the section will land when you release.

• Desktop: hover the section heading to show the handle, then click and drag it.
• Mobile: the drag handle is always visible on touch screens. Press and hold it, then drag to reorder.

Your layout is saved automatically to the browser and restored on every visit — you only need to arrange the sidebar once. A small set of tool-dependent sections (like the Roof, Door, Window, and Nature sections that appear only when the matching shape is selected) are pinned in place and cannot be reordered; everything else is fair game.

Collapsing Individual Categories

Each section in the sidebar — Tool, Shape, Material, Roof, Door, Grid Size, and so on — can be collapsed individually by clicking its heading. A small arrow indicates whether the section is expanded or collapsed.

This is different from minimising the whole sidebar: you're just hiding one category while the others stay visible. It's useful for hiding the Grid Size section once you've set your dimensions, or collapsing the Material section while you focus on shape selection without scrolling past a long palette.

Each section remembers its collapsed state between sessions, so it stays put the next time you open Buildopia. You don't need to re-collapse sections every time.

Mobile Layout Differences

On mobile, the sidebar sits along the bottom of the screen rather than the right side. The controls work the same way — resize handle, click to minimise, swipe to scroll, drag handles to reorder, tap category headings to collapse — but everything is oriented vertically rather than horizontally. The sidebar can still be dragged to take up more or less of the screen height.

Because the material palette tends to be the largest section, Buildopia collapses some sections by default on smaller screens to keep the most-used controls within reach without scrolling. You can expand any collapsed section by tapping its heading, and drag sections into whatever order suits your workflow.