Skip to the content
Design and branding

Side nav settings in the Design tab

Every setting of the Side nav – list menu panel in the Design tab: where it is, what it starts as, what it does and what visitors see.

Reference22 min read Updated

On this page

The side nav is a menu along the left or right side of the tour that lists the rooms, with the room groups as folders, an optional logo, and a foot of links and icons. This page lists every setting of the Side nav – list menu panel (Design tab > Side nav – list menu) in the Design tab, in the order the panel shows them. To choose which bars a tour has, start with Customize the player's bars, sidebar and gallery.

Who can use it. The owner and, by default, an Admin collaborator can open the Design tab; it is not open to Editors or Viewers. Every plan has the side nav. In the Basic view the panel has the Layout tab with Enable side nav, Default to open, Position, Nested navigation (categories), List a parent group's own panoramas and the logo switch; the Advanced view adds the rest of the Layout tab, the Menu title tab and the Style tab. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look: the switches that put the menu in the tour stay as you set them, and its look (position, width, style, toggle, title, colors) goes back to the starting values below (What visitors get).

When visitors get a change. The preview beside the panels shows it at once. Visitors get it after you click Save & Render, or after Publish changes when the tour uses Draft Workflows (My changes do not show for visitors).

Turn the menu on

Enable side nav

The switch at the top of the panel puts the menu in the tour. It starts off.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), the switch at the top. Basic and Advanced view. Default: off What it does: Adds the menu to the tour's player. The other settings of the panel only matter while it is on. A dot beside Side nav – list menu in the list of modules shows that it is on. The menu is also on the page, shut and for a phone only, when a phone bar has its Side Nav - List Menu button ticked in Mobile navigation, which the starting values do. What visitors see: A menu button and a list of rooms beside the picture. With the switch off they see no side menu on a computer. Related: Mobile navigation settings.

How the menu opens and where it sits

These settings are on the Layout tab. Default to open and Position are in both views; the others are in the Advanced view only.

Default to open

Choose whether the list is open when the tour loads.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Behaviour > Default to open. Basic and Advanced view. Default: on What it does: Opens the menu at the start. It counts on a screen 768 pixels wide or wider; on a phone the menu always starts shut. What visitors see: The menu open beside the picture, or shut with only its button showing. The visitor can open and shut it either way.

Choose how wide the menu is.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Size > Navigation width. Advanced view. Default: Standard (default) (standard) What it does: Narrow is a compact list, Wide gives room for longer titles. The widths grow on big screens: 250, 320 and 400 pixels for Narrow, 300, 380 and 480 for Standard (default), and 350, 440 and 560 for Wide on a screen under 1440 pixels, from 1440 and from 2560. What visitors see: The menu at that width.

Position

Choose which side of the picture the menu is on.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Placement > Position. Basic and Advanced view. Default: Left side (left) What it does: Puts the menu on the Left side or the Right side. A folder's flyout panel opens on the side toward the picture. What visitors see: The menu at that side. Related: Layout position.

Layout position

Choose between a menu that fills the side and a floating card.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Placement > Layout position. Advanced view. Default: Fixed to side (fixed) What it does: Fixed to side sits beside the view. Floating pill is a rounded card above the panorama. What visitors see: The menu as a full-height panel, or as a card with a gap round it. Related: Position.

Groups of rooms

These settings are on the Layout tab, in the card Categories. Only Nested navigation (categories) is in the Basic view; the others show in the Advanced view while it is on. Organize scenes into panorama groups has the whole story, from making a group to seeing it in the menu.

Nested navigation (categories)

Groups the rooms under the names of their panorama groups.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Nested navigation (categories). Basic and Advanced view. Default: off What it does: Shows one folder for each group instead of a flat list. Rooms in no group go in a folder named by Ungrouped folder label. The app also calls a group a category. What visitors see: A list of folders. With the switch off, or while no room is in a group, a flat list of rooms. Needs: Rooms in groups (Panorama Groups). Related: Sidebar style, Panorama Groups.

List a parent group's own panoramas

How a group with groups under it lists its own panoramas.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > List a parent group's own panoramas, under Nested navigation (categories). Basic and Advanced view. Default: on (on) What it does: For a group that other groups are Part of (Settings, Panorama Groups), its own panoramas are listed one by one below those groups, with no heading of their own. Off, they are a group under its own name, still below the others. What visitors see: With the Top nav bar – multi menu opening the side list, a press on Restaurants lists The Keys and its other restaurants' groups, then each panorama tagged Restaurants itself as a row. The bar's dropdowns follow the same order. Needs: Parent groups, and the Top nav bar – multi menu on Automatic.

Choose how a folder opens.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Sidebar style. Advanced view. Default: Flyout menu (flyout) What it does: Flyout menu opens a folder's rooms in a panel beside the menu while the pointer is on the folder. Nested / accordion opens the rooms under the folder. Single page replaces the menu with the folder's rooms and a back button. Under 768 pixels wide Flyout menu works like Nested / accordion. What visitors see: Folders that open in that way. Needs: Nested navigation (categories) on.

Ungrouped folder label

Name the folder for rooms that are in no group.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Ungrouped folder label. Advanced view. Default: Other Panoramas What it does: Sets the folder's name. It is the same setting as Ungrouped Items Label under Panorama Groups on the Settings tab. A tour in other languages can translate the name there. What visitors see: The folder with that name, once some rooms are in groups. Needs: Nested navigation (categories) on.

Click to lock open

Keeps a folder's panel open after a click.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Click to lock open. Advanced view. Default: off What it does: In the Flyout menu style on a computer, a click on a folder keeps its panel open instead of only while the pointer is over it. What visitors see: A folder panel that stays until the visitor clicks again or chooses a room. Needs: Nested navigation (categories) on, and Flyout menu chosen.

Show category arrows

Show an arrow beside each folder.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Show category arrows. Advanced view. Default: on What it does: Draws an arrow at the end of each folder's row. What visitors see: The arrows, or plain folder names. Needs: Nested navigation (categories) on.

Steps the rows in from the edges of the menu.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Categories > Navigation side margin. Advanced view. Default: None (full width) (none) What it does: A choice of 10, 20, 30, 40 or 50 pixels. The rows and folders get that gap on both sides, a small gap above and below and rounded corners. What visitors see: Rows that stand in from the menu's edges instead of running the full width. Needs: Nested navigation (categories) on for the panel to show it.

Panorama Groups

The list of groups, and the order the menu shows them in.

Where: Settings tab > card Panorama Groups. It is not in the Design tab. The Settings tab is in the Advanced view. Default: none What it does: Holds the names of the tour's groups in the order of that list, which its ↑ and ↓ buttons change. A group that rooms use but the list lacks comes after the others, in alphabetical order, and a group with no rooms is not shown. You put each room in a group on the Panoramas tab. What visitors see: Folders in that order. Needs: Nested navigation (categories) on. Related: Organize scenes into panorama groups.

The toggle button

These settings are on the Layout tab, in the card Toggle icon. The card is in the Advanced view and shows in the panel while Nested navigation (categories) is on; the player uses the saved choice either way.

Toggle style

Choose the look of the button that opens and shuts the menu.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Toggle icon > Toggle style. Advanced view. Default: Hamburger menu (hamburger) What it does: Hamburger menu is three lines. Arrow is an arrow that points toward the picture while the menu is shut and toward the menu while it is open. What visitors see: The button in that style. Related: Arrow position.

Arrow position

Choose where the arrow sits along the edge.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Toggle icon > Arrow position. Advanced view. Default: Top (top) What it does: Puts the arrow at the Top or in the Middle of the edge. The field shows only while Toggle style is Arrow. What visitors see: The arrow at that place. Needs: Toggle style set to Arrow.

These settings are on the Layout tab, in the card Brand logo. Enable sidebar brand logo is in both views; the other two are shown while it is on.

Shows a logo, centred, at the top or the bottom of the menu.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Brand logo > Enable sidebar brand logo. Basic and Advanced view. Default: on What it does: Lets the menu show a logo. The logo is the one chosen under Selected logo; while that has none, the tour's own logo from Branding is used. What visitors see: The logo in the menu. With no logo anywhere, nothing. Related: Brand colors and logos.

Choose a logo for the menu alone.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Brand logo > Selected logo. Basic and Advanced view. Default: none What it does: Upload or choose from assets opens the picker. Once a logo is chosen, Change logo picks another and Remove clears it. While none is chosen and the tour has a logo, the panel says Using the tour logo, from Design > Branding. and Use a different logo here chooses one for the menu. What visitors see: That logo in the menu. Needs: Enable sidebar brand logo on.

Logo position

Put the logo at the top or the bottom of the menu.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Brand logo > Logo position. Advanced view. Default: Top of sidebar (top) What it does: Chooses Top of sidebar or Bottom of sidebar. The field shows once there is a logo. What visitors see: The logo at that end of the menu. Needs: Enable sidebar brand logo on, and a logo.

These settings are on the Layout tab, in the card Foot links. The card is in the Advanced view. It holds the links at the foot of the menu, under the folding heading Arrange & toggle icons (which says how many are on, for example 3 on), and Show icons as.

Arrange & toggle icons

Choose which links the foot has and put them in order. Drag a row, or press the up and down arrows beside it, to move it.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Foot links > Arrange & toggle icons. Advanced view. Default: listRooms, floorplan, gallery, info, autorotate, vr, accessibility, map, fullscreen, lang What it does: Sets the order of the foot's links. The rows are named as the same buttons are in the other bars: an icon has one name everywhere. List All Rooms, Floor Plan and Room Pictures are the links the menu has always had; the other seven are off until you switch them on. A row that is switched off keeps its place in the list. Floor Plan and Room Pictures keep their switches in settings of their own; Room Pictures starts on and Floor Plan starts off. What visitors see: The links that are on, in that order, at the foot of the menu. Related: Icon lists of the other bars.

List All Rooms

Opens a list of every room by name.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > List All Rooms. Advanced view. Default: off What it does: Adds a link to the foot. Switching it on also gives the Media Window its Room list tab. What visitors see: A link that opens the list of rooms in the Media Window. Related: Media window.

Room Info

Opens the room's text and media.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Room Info. Advanced view. Default: off What it does: Adds a link with the words Room Info. What visitors see: A link that opens the Media Window on the room's information. It shows for a room that has text or media, or when the tour has some.

Autorotate

Starts and stops the automatic turning.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Autorotate. Advanced view. Default: off What it does: Adds a link with the words Autorotate. What visitors see: A link that starts or stops the turning and shows which. It starts out stopped for a visitor who asked their device for less motion.

VR Mode

Enters VR.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > VR Mode. Advanced view. Default: off What it does: Adds a link with the words VR Mode. What visitors see: A link that asks the player to enter VR mode. Related: VR mode and Cardboard support.

Accessibility Mode

Opens the accessible view of the tour.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Accessibility Mode. Advanced view. Default: off What it does: Adds a link with the words Accessibility Mode. It is left out of a tour that has the accessibility button switched off. What visitors see: A link for the tour's accessibility mode.

Map

Opens the tour's map.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Map. Advanced view. Default: off What it does: Adds a link with the words Map. What visitors see: A link that opens the map. It is left out for a tour in which no panorama has a position. Needs: Panoramas with a position.

Fullscreen

Takes the player full screen.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Fullscreen. Advanced view. Default: off What it does: Adds a link with the words Fullscreen. It is left out where the browser cannot go full screen and in a tour that has the full screen button switched off. What visitors see: A link that toggles full screen.

Language Switcher

Lets a visitor change the language of the tour.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > Foot links > Arrange & toggle icons > Language Switcher. Advanced view. Default: off What it does: Adds a link with the word Language. What visitors see: A language list that reloads the tour in the chosen language. A tour with one language shows no such link. Needs: At least two languages in the tour. Related: A tour in several languages.

Show icons as

Choose between links with words and a row of icons.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Layout tab > card Foot links > Show icons as. Advanced view. Default: Text and icon What it does: Text and icon puts each link on its own line with its words. Icons puts them in one row. The choice is saved as the display mode of the three links the foot has always had, and the panel reads Icons only when all three are icons. What visitors see: Links with words, one under the other, or a row of small round icons.

The menu title and the rows

These settings are on the Menu title tab, in the Advanced view only.

Show menu title

Shows or hides the word above the list of rooms.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Menu title tab > card Menu title > Show menu title. Advanced view. Default: on What it does: Hide the word to give the list more room. The Single page style still puts a folder's name in the heading while that folder is open. What visitors see: The word, or none.

The word above the list of rooms.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Menu title tab > card Menu title > Menu title. Advanced view. Default: Menu What it does: Up to 40 characters. An empty box leaves the standard word. What visitors see: Your word above the rooms. Needs: Show menu title on.

Lines between items

Draws a thin line between one row and the next.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Menu title tab > card Rows > Lines between items. Advanced view. Default: off What it does: Adds a line between the rows in the top list, inside an open folder and in the Single page lists, but not above the first or under the last. What visitors see: Fine lines between the rows. Related: Line colour.

Line colour

The color of those lines.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Menu title tab > card Rows > Line colour. Advanced view. Default: none: empty, which means automatic What it does: Left empty, the line is a faint tint of the menu's text color, which the field shows. Use automatic empties it again. What visitors see: The lines in that color. Needs: Lines between items on.

Line height

Choose how tall the rows are.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Menu title tab > card Rows > Line height. Advanced view. Default: Normal (normal) What it does: Small, Normal or Large: the space above and below each row of the menu. What visitors see: Rows a few pixels shorter or taller.

Colors and type of the menu

These settings are on the Style tab, in the Advanced view only.

Use your own colours

Colors the menu apart from the rest of the player.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Use your own colours. Advanced view. Default: off What it does: While it is off the menu wears the colors, glass effect and font of Global aesthetics. Switching it on shows the fields below. What visitors see: With it on, the menu in the colors and type below; with it off, the tour's global look. Related: Brand colors.

Global Typography Font

The font of the menu.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Global Typography Font. Advanced view. Default: default What it does: Picks a font for the menu alone. default keeps the tour's font. It counts only while Use your own colours is on. What visitors see: The menu's words in that font. Needs: Use your own colours on.

Base font size

The size of the menu's words.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Base font size. Advanced view. Default: 16 px What it does: A slider from 12 to 24 pixels. What visitors see: The menu's words at that size. Needs: Use your own colours on.

Interface text colour

The color of the menu's words.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Interface text colour. Advanced view. Default: #ffffff What it does: Sets the color of the room names and the title. A fainter shade of it is used for secondary words. What visitors see: The words in that color. Needs: Use your own colours on.

Interface icon colour

The color of the menu's icons.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Interface icon colour. Advanced view. Default: #ffffff What it does: Sets the color of the icons in the menu. What visitors see: The icons in that color. Needs: Use your own colours on.

The color of a link under the pointer.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Link hover colour. Advanced view. Default: #6366f1 What it does: Sets the color a row's words take while the pointer is on it. What visitors see: The row in that color under the pointer. Needs: Use your own colours on.

Hover background colour

The color behind a row under the pointer.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Hover background colour. Advanced view. Default: #ffffff What it does: Sets the color laid behind a row while the pointer is on it. Hover background opacity sets how strongly. What visitors see: A tint behind the row under the pointer, and a lighter one behind each folder's row. Needs: Use your own colours on.

Make solid (no transparency)

Makes the hover background fully solid.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Hover background colour > Make solid (no transparency). Advanced view. Default: off What it does: Switches the hover background to full strength. Hover background opacity is hidden while it is on. What visitors see: A solid color behind the row under the pointer. Needs: Use your own colours on.

Primary UI colour

The color of the menu itself.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Primary UI colour. Advanced view. Default: #141419 What it does: Sets the menu's background. It is drawn with the glass opacity of Global aesthetics, 60 percent to start with, so the picture shows through. What visitors see: The menu in that color. Needs: Use your own colours on. Related: Global aesthetics.

Open group background

The color behind the rooms of an open folder.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Open group background. Advanced view. Default: none: empty, which means automatic What it does: Left empty, the rooms are on the menu's own color, which the field shows. Use automatic empties it again. What visitors see: The rooms of an open folder on that color. Needs: Use your own colours on, and Nested navigation (categories) with Nested / accordion or Flyout menu.

Hover background opacity

How strong the hover background is.

Where: the Side nav – list menu panel (Design tab > Side nav – list menu), Style tab > Hover background opacity. Advanced view. Default: 25 percent What it does: A slider. It sets how much of Hover background colour shows. The slider is hidden while Make solid (no transparency) is on. What visitors see: A fainter or stronger tint behind the row under the pointer. Needs: Use your own colours on, and Make solid (no transparency) off.

Troubleshooting

There is no side menu in my tour. Check Enable side nav and save. On a phone the menu is a button in a phone bar: see Mobile navigation settings. On a Free plan, a tour in a Pro theme that has never been hosted shows the free Default look, which keeps your switches but not your look settings. A change that is not saved or published does not reach visitors yet.

Visitors see a flat list, not folders. Nested navigation (categories) is off, or no room is in a group yet. See Organize scenes into panorama groups.

I cannot find Sidebar style, Navigation width or Foot links. They are in the Advanced view. Click Advanced. Sidebar style also needs Nested navigation (categories) on.

A foot link I switched on is missing. Map needs panoramas with a position, Language Switcher needs two languages, Accessibility Mode and Fullscreen are left out when the tour switches those buttons off, and Room Info shows only for a room with text or media.

My colors do nothing. The fields on the Style tab count only while Use your own colours is on.

Was this article helpful?