Toolbar Component

The Toolbar component provides a customizable interface for controlling various aspects of the 3D tour experience. It can be positioned either at the bottom center or right center of the viewport and includes controls for camera settings, measurements, floorplans, configurators, and resolution picking.

Variant

The Toolbar supports two positioning variants:

bottom-center (default): Positions the toolbar at the bottom of the viewport, centered horizontally
right-center: Positions the toolbar at the right side of the viewport, centered vertically

// Bottom center positioning
<Toolbar variant="bottom-center">
  {/* Toolbar content */}
</Toolbar>
 
// Right center positioning
<Toolbar variant="right-center">
  {/* Toolbar content */}
</Toolbar>

The variant also affects the animation direction when showing/hiding the toolbar:

bottom-center: Slides up/down
right-center: Slides left/right

Styling Overrides

The Toolbar component offers several ways to customize its appearance:

Class Name Override

You can provide a custom className to override the default styles:

<Toolbar className="custom-toolbar">
  {/* Toolbar content */}
</Toolbar>

The default class is be-toolbar with an additional class for the divider variant.

Label Color

You can customize the color of labels using the labelColor prop:

<Toolbar labelColor="#FF0000">
  {/* Toolbar content */}
</Toolbar>

Additional HTML Attributes

The component extends React.HTMLAttributes<HTMLDivElement>, allowing you to pass any valid HTML div attributes:

<Toolbar style={{ border: '1px solid black' }} data-testid="toolbar">
  {/* Toolbar content */}
</Toolbar>

Configuration

The config prop allows you to control the visibility of different toolbar features:

interface ToolbarConfig {
  resolution: boolean;    // Toggle resolution picker
  configurator: boolean;  // Toggle configurator buttons
  floorplan: boolean;    // Toggle floorplan button
  measurement: boolean;   // Toggle measurement tools
}
 
<Toolbar
  config={{
    resolution: true,
    configurator: false,
    floorplan: true,
    measurement: true
  }}
>
  {/* Toolbar content */}
</Toolbar>

All config options default to true if not specified. The config values can be overridden by tour settings (tour.options.tourSettings.overlay.toolbar).

Custom Content Positioning

The Toolbar allows you to add custom content at the beginning or end of the toolbar using special wrapper components:

First Content

Content placed at the start of the toolbar:

<Toolbar>
  <ToolbarContentFirst>
    <button>Custom Start Button</button>
  </ToolbarContentFirst>
  {/* Other toolbar content */}
</Toolbar>

Last Content

Content placed at the end of the toolbar:

<Toolbar>
  {/* Other toolbar content */}
  <ToolbarContentLast>
    <button>Custom End Button</button>
  </ToolbarContentLast>
</Toolbar>

You can use both simultaneously:

<Toolbar>
  <ToolbarContentFirst>
    <button>Start</button>
  </ToolbarContentFirst>
  {/* Default toolbar content */}
  <ToolbarContentLast>
    <button>End</button>
  </ToolbarContentLast>
</Toolbar>

Note: Custom content should respect the toolbar’s layout direction based on the selected variant. The variant class will be applied automatically to maintain consistent styling.

Full Example

Tags Usespace