Skip to main content

​
Built-in buttons

The navbar option accepts an array of button identifiers and/or custom button objects. The following built-in identifiers are available:
IdentifierDescription
zoomOutZoom out button
zoomRangeZoom slider
zoomInZoom in button
zoomShorthand for zoomOut + zoomRange + zoomIn
moveLeftPan left button
moveRightPan right button
moveTopPan up button
moveDownPan down button
moveShorthand for moveLeft + moveRight + moveTop + moveDown
downloadDownload the panorama
descriptionOpen the description panel
captionDisplay the caption text
fullscreenToggle fullscreen
const viewer = new Viewer({
  navbar: [
    'zoom',
    'move',
    'caption',
    'fullscreen',
  ],
});

​
Plugin buttons

Plugins can register their own navbar buttons. When you do not override the navbar option, plugin buttons appear automatically. When you do provide a custom navbar array, you must explicitly include the plugin button identifiers. The button identifier for each plugin is listed on its documentation page. 
const viewer = new Viewer({
  plugins: [MarkersPlugin, VirtualTourPlugin],
  navbar: [
    'zoom',
    'caption',
    'markers',        // MarkersPlugin button id
    'virtual-tour',   // VirtualTourPlugin button id
    'fullscreen',
  ],
});

​
Custom buttons

You can include arbitrary custom buttons in the navbar array. A custom button is a plain object with the following fields:
​
content
string | HTMLElement | NavbarButtonElement
required
Content of the button. Preferably a square image or SVG icon string.
content can also be an existing DOM element or a Web Component. If your component has an attachViewer() method, it will be called with the viewer instance as its first argument.
​
onClick
function(viewer)
Function called when the button is clicked. Receives the Viewer instance.
​
id
string
Unique identifier for the button. Required if you want to reference the button later via viewer.navbar.getButton().
​
title
string
Tooltip text shown on mouse hover. For i18n, this can be a key in the main lang object.
​
className
string
CSS class name added to the button element.
​
disabled
boolean
default:"false"
Initially renders the button in a disabled state.
​
visible
boolean
default:"true"
Initially shows or hides the button.

​
Example: custom button

const viewer = new Viewer({
  navbar: [
    'zoom',
    'caption',
    {
      id: 'my-button',
      content: '<svg>...</svg>',
      title: 'My action',
      className: 'my-button-class',
      onClick: (viewer) => {
        console.log('button clicked', viewer.getPosition());
      },
    },
    'fullscreen',
  ],
});

​
Controlling buttons at runtime

Once the viewer is initialized, you can show, hide, enable, or disable any button by its id: 
// Show a previously hidden button
viewer.navbar.getButton('my-button').show();

// Hide a button
viewer.navbar.getButton('my-button').hide();

​
Disabling the navbar

Set navbar to false (or omit it entirely if it is not needed) to hide the navbar completely. Note that the caption option will also have no visible effect when the navbar is disabled. 
const viewer = new Viewer({
  navbar: false,
});

Build docs developers (and LLMs) love

Get started for freeTalk to us