# Top nav bar - dropdown settings in the Design tab

URL: https://www.panoramr.com/help/design-top-nav-bar-dropdown
Category: Design and branding
Keywords: top nav bar, title bar, top bar, room dropdown, mega gallery, scene title, header bar, just icons
Last checked: 2026-10-22

Every setting of the Top nav bar - dropdown panel in the Design tab: where it is, what it starts as, what it does and what visitors see.

The top nav bar is a bar across the top of the tour with the name of the room on show and, when you want it, a dropdown list of the rooms and a row of round buttons. This page lists every setting of the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown) 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](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars).

**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 bar. In the **Basic** view the panel shows **Show title bar**, **Dropdown menu** and the **Icons** tab; the **Advanced** view adds the rest of the **Bar** 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, which has this bar on: see [What visitors get](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars#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](https://www.panoramr.com/help/when-do-changes-show)).

## Turn the bar on

### Show title bar

The switch at the top of the panel puts the bar across the top of the tour. It starts on.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), the switch at the top. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds the bar, with the room's name and the buttons you chose. With the switch off the bar is gone; the buttons can still float in the corner, see **Just icons**.
**What visitors see:** A bar across the top with the room's name, which changes as they move from room to room. With the switch off there is no bar. On a screen 768 pixels wide or narrower the bar is the phone's own when the tour has the phone's bars, which the default settings give it: its buttons are then the ones chosen under **Top bar features** in **Mobile navigation**.
**Related:** [Mobile navigation and the phone layout](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars#on-a-phone), **Just icons**.

## The bar

These settings are on the **Bar** tab.

### Width

Choose how wide the bar is and whether it floats or runs edge to edge.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Bar** > **Width**. Advanced view.
**Default:** **Full screen, fixed** (`fixed`)
**What it does:** Five choices: **Small (33%)**, **Standard (50%)**, **Wide (75%)**, **Full screen (100%)** and **Full screen, fixed**. The first four are a rounded bar that floats below the top edge, as wide as the share named. **Full screen (100%)** floats too, with a small gap on each side. **Full screen, fixed** is a strip that is part of the top edge: it has square corners and no gap.
**What visitors see:** The bar at that width, in the middle of the top edge. On a phone the bar and its dropdown are as wide as the screen allows, whatever you chose.
**Related:** **Show title bar**.

### **Just icons**

Shows the buttons by themselves, floating in the corner, when the bar is off.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Bar** > **Just icons**. Advanced view.
**Default:** `on`
**What it does:** The switch shows only while **Show title bar** is off. On, the buttons you ticked on the **Icons** tab float at the top right of the player, each in its own round glass button, with no bar behind them and no room name. There is no floating Language Switcher. Off, the tour has no top buttons at all.
**What visitors see:** Round buttons at the top right (the left in a right-to-left language). The room's name and the dropdown are not shown, because they belong to the bar.
**Needs:** **Show title bar** off.
**Related:** **Show title bar**, **Icons in the bar**.

## The room dropdown

These settings are on the **Bar** tab, in the cards **Dropdown** and **Mega gallery**.

### Dropdown menu

Turns the room's name in the bar into a button that opens a list of all the rooms.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Dropdown** > **Dropdown menu**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a small arrow after the name. The switch is hidden while **Mega gallery override** is on, which takes its place.
**What visitors see:** They click the name, or press Enter, Space or the Down arrow on it, and a list of the rooms opens under the bar. Clicking a room goes to it and closes the list; so does a click anywhere else, or the Escape key. Up, Down, Home and End walk the list. With the switch off the name is plain text.
**Related:** **Dropdown thumbnails**, **Mega gallery override**.

### Dropdown thumbnails

Puts a small picture of each room beside its name in the dropdown.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Dropdown** > **Dropdown thumbnails**. Advanced view.
**Default:** `on`
**What it does:** The switch shows only while **Dropdown menu** is on and **Mega gallery override** is off. On, each row has a thumbnail of the room.
**What visitors see:** A picture beside each name. The pictures load after the first room has appeared, so they do not slow it down; until then the row shows a plain dark color. Off, the list is names only.
**Needs:** **Dropdown menu** on.

### Mega gallery override

Replaces the dropdown list with a grid of room thumbnails.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Mega gallery** > **Mega gallery override**. Advanced view.
**Default:** `off`
**What it does:** The name in the bar opens a panel of room thumbnails with their names instead of a list. Turning it on switches the dropdown list off, whatever **Dropdown menu** says.
**What visitors see:** A grid of pictures under the bar. They click a picture to go to that room; the panel closes as the list does.
**Related:** **Thumbnail size**, **Thumbnails per row**, **Dropdown menu**.

### Thumbnail size

Sets how big the pictures of the mega gallery are.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Mega gallery** > **Thumbnail size**. Advanced view.
**Default:** **Medium** (`medium`)
**What it does:** **Small**, **Medium** or **Large**. The control shows only while **Mega gallery override** is on.
**What visitors see:** Smaller or bigger pictures in the grid.
**Needs:** **Mega gallery override** on.

### Thumbnails per row

Sets how many pictures the mega gallery puts on a row.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Bar** tab > card **Mega gallery** > **Thumbnails per row**. Advanced view.
**Default:** `4`
**What it does:** **Auto-fit**, or 3 to 8 thumbnails. The control shows only while **Mega gallery override** is on.
**What visitors see:** That many pictures across. With **Auto-fit** the number follows the width of the panel.
**Needs:** **Mega gallery override** on.

## Which buttons the bar has

These settings are on the **Icons** tab, in the card **Icons in the bar**. The tab is there in both views. The card has a row for each button: a handle, its picture, its name and a switch. The card's heading says how many are on, for example `3 on`.

### Icons in the bar

The order of the rows is the order of the buttons. Drag a row, or press the up and down arrows beside it, to move it.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > card **Icons in the bar**. Basic and Advanced view.
**Default:** `info, autorotate, vr, accessibility, floorplan, map, fullscreen, lang, listRooms`
**What it does:** Sets the order of the buttons. An icon has one name in every bar. A row that is switched off keeps its place in the list.
**What visitors see:** The buttons that are on, in that order, at the right end of the bar after the room's name. The name and its dropdown are always first.
**Related:** [Icon lists of the other bars](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars), **Show title bar**.

### Autorotate

Turns the tour's slow spin on and off.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Autorotate**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a play and pause button with the tooltip `Toggle Autorotate`. It shows pause while the tour is turning by itself and play while it is still.
**What visitors see:** A press starts or stops the turning. Dragging the picture stops it. The button shows the state the tour starts in, which depends on the tour's autorotate setting and on a visitor who has asked their device for less motion.
**Related:** **Show title bar**.

### Accessibility Mode

Opens the text version of the tour.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Accessibility Mode**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Accessibility Linear View`. It needs a second condition: see the Accessibility button switch below.
**What visitors see:** A press opens the plain, linear version of the tour that Panoramr makes for it. A downloaded copy of the tour has no such button, because that page is made by the server.
**Needs:** The Accessibility button switch below not switched off.

### Room Info

Opens the text and media of the room.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Room Info**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Information` that opens the Media Window on its overview.
**What visitors see:** A press opens the room's text and media. In a room that has none, and when the tour has no media of its own, the button is hidden.
**Related:** [Info and media panel](https://www.panoramr.com/help/info-and-media-panel).

### Floor Plan

Opens the tour's floor plan.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Floor Plan**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View Floorplan`.
**What visitors see:** A press opens the floor plan. A tour with no floor plan shows no button.
**Needs:** A [floor plan](https://www.panoramr.com/help/adding-floor-plans-and-interactive-minimaps-to-your-tours) on the tour.

### Map

Opens a map of the rooms.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Map**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View Map`.
**What visitors see:** A press opens a map with a pin for each room that has a position. If no room has a position the button is not shown.
**Needs:** At least one panorama with a position.

### VR Mode

Lets a visitor with a headset enter VR.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **VR Mode**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Enter VR`.
**What visitors see:** A press asks the browser to enter VR. What happens next depends on the visitor's device and browser; it was not tried against a headset for this page.

### Fullscreen

Makes the tour fill the screen.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Fullscreen**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a button with the tooltip `Toggle Fullscreen`. It needs a second condition: see the Fullscreen button switch below.
**What visitors see:** A press fills the screen and the icon changes to its shrink form; a second press goes back. A browser that cannot go full screen on the page does nothing.
**Needs:** The Fullscreen button switch below not switched off.

### Language Switcher

Lets a visitor change the language of the tour.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **Language Switcher**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a globe button with the tooltip `Change Language`. It lists the languages the tour has.
**What visitors see:** A globe that opens a list of languages. A tour with one language shows no globe.
**Needs:** A tour in [more than one language](https://www.panoramr.com/help/how-to-create-a-360-virtual-tour-in-multiple-languages).

### List All Rooms

Opens the list of all rooms in the Media Window.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Icons** tab > **Icons in the bar** > **List All Rooms**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View All Rooms`. The same icon on any bar gives the Media Window its **Room list** tab.
**What visitors see:** A press opens the list of rooms, from which a click goes to a room.
**Related:** [Info and media panel](https://www.panoramr.com/help/info-and-media-panel).

## Colors and type of the bar

These settings are on the **Style** tab. The tab is in the **Advanced** view only.

### Use your own colours

Colors and types the bar apart from the rest of the player.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Use your own colours**. Advanced view.
**Default:** `off`
**What it does:** While it is off the bar wears the colors, the type and the glass effect of **Global aesthetics**. Switching it on shows the fields below.
**What visitors see:** With it on, the bar and its buttons in the fields' colors, font and size; with it off, the tour's global look.
**Related:** [Brand colors](https://www.panoramr.com/help/adding-custom-logos-and-brand-colors-to-the-tour-player).

### Global Typography Font

The typeface of the bar's words.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Global Typography Font**. Advanced view.
**Default:** `default`
**What it does:** Sets the font of the room's name, the dropdown and the mega gallery. It counts only while **Use your own colours** is on. A font that is not the default is loaded with the page.
**What visitors see:** The bar's words in that font. With the default, the tour's own font.
**Needs:** **Use your own colours** on.

### Base Font Size

The size of the bar's words.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Base Font Size**. Advanced view.
**Default:** `16` pixels
**What it does:** A slider from 12 to 24 pixels. It counts only while **Use your own colours** is on.
**What visitors see:** The bar's text at that size.
**Needs:** **Use your own colours** on.

### Interface Text Color

The color of the bar's words.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Interface Text Color**. Advanced view.
**Default:** `#ffffff`
**What it does:** Sets the color of the room's name and of the lists under it. It counts only while **Use your own colours** is on.
**What visitors see:** The words in that color.
**Needs:** **Use your own colours** on.

### Interface Icon Color

The color of the buttons' pictures.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Interface Icon Color**. Advanced view.
**Default:** `#ffffff`
**What it does:** Sets the color of every icon in the bar. It counts only while **Use your own colours** is on.
**What visitors see:** The icons in that color.
**Needs:** **Use your own colours** on.

### Primary UI Color

The color of the bar itself.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Primary UI Color**. Advanced view.
**Default:** `#07077d`
**What it does:** Sets the bar's color, and the dropdown's. The bar is drawn with the glass opacity of **Global aesthetics**, so the picture shows through. It counts only while **Use your own colours** is on.
**What visitors see:** The bar in that color.
**Needs:** **Use your own colours** on.
**Related:** **Global aesthetics**.

### Hover Brightness

How much a button lightens under the pointer.

**Where:** the Top nav bar - dropdown panel (Design tab > Top nav bar – dropdown), **Style** tab > **Hover Brightness**. Advanced view.
**Default:** `25` percent
**What it does:** A slider from 0 to 100. It sets how much white is laid over a button, or over the room's name, while the pointer is on it. It counts only while **Use your own colours** is on.
**What visitors see:** The item lighter by that share when the pointer is over it.
**Needs:** **Use your own colours** on.

## Settings with no control

### Fullscreen button

A second switch behind the Fullscreen icon that no panel shows.

**Where:** Nowhere in the Design tab.
**Default:** `on`
**What it does:** The Fullscreen button is in the bar only when this is on and **Fullscreen** is on. A theme or an old tour that saved it as off hides the button whatever the panel says.
**What visitors see:** Nothing different while it is on. When it is off the bar has no Fullscreen button.
**Related:** **Fullscreen**.

### Accessibility button

A second switch behind the Accessibility icon that no panel shows.

**Where:** Nowhere in the Design tab.
**Default:** `on`
**What it does:** The Accessibility button is in the bar only when this is on and **Accessibility Mode** is on. A downloaded copy of a tour always has it off, because the text version is made by the server.
**What visitors see:** Nothing different while it is on. When it is off the bar has no Accessibility button.
**Related:** **Accessibility Mode**.

## Troubleshooting

**There is no top bar in my tour.** Check **Show title bar**. On a screen 768 pixels wide or narrower the top bar is the phone's own, set by **Mobile navigation**. A change that is not saved or published does not reach visitors yet.

**The room's name is not a button.** Check **Dropdown menu**, and that **Mega gallery override** is off if you wanted the list.

**A button I switched on is missing.** **Floor Plan** needs a floor plan, **Map** needs a panorama with a position, **Language Switcher** needs a tour in more than one language, and **Room Info** is hidden in a room with no text or media. **Fullscreen** and **Accessibility Mode** also need the two switches under "Settings with no control".

**Only floating buttons show.** **Show title bar** is off and **Just icons** is on. Turn the bar on to get the name and the dropdown back.