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
- Turn the menu on
- Enable side nav
- How the menu opens and where it sits
- Default to open
- Navigation width
- Position
- Layout position
- Groups of rooms
- Nested navigation (categories)
- List a parent group's own panoramas
- Sidebar style
- Ungrouped folder label
- Click to lock open
- Show category arrows
- Navigation side margin
- Panorama Groups
- The toggle button
- Toggle style
- Arrow position
- Brand logo
- Enable sidebar brand logo
- Selected logo
- Logo position
- Foot links
- Arrange & toggle icons
- List All Rooms
- Room Info
- Autorotate
- VR Mode
- Accessibility Mode
- Map
- Fullscreen
- Language Switcher
- Show icons as
- The menu title and the rows
- Show menu title
- Menu title
- Lines between items
- Line colour
- Line height
- Colors and type of the menu
- Use your own colours
- Global Typography Font
- Base font size
- Interface text colour
- Interface icon colour
- Link hover colour
- Hover background colour
- Make solid (no transparency)
- Primary UI colour
- Open group background
- Hover background opacity
- Troubleshooting
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.
Navigation width
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.
Sidebar style
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.
Navigation side margin
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.
Brand logo
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.
Enable sidebar brand logo
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.
Selected logo
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.
Foot links
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.
Menu title
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.
Link hover colour
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.
Next steps
Was this article helpful?