Implementation:Apache Druid ExploreHeaderBar

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Exploration
Last Updated	2026-02-10 10:00 GMT

Overview

ExploreHeaderBar is a memoized React component that renders the top navigation bar for the Explore view with navigation links, timezone selection, layout controls, and a side panel toggle.

Description

The component is built using a BlueprintJS Navbar with left-aligned and right-aligned groups. The left side shows the Druid logo with an "Explore" label inside a Popover that provides navigation links to other console views (Home, Query, Load Data, Datasources, Supervisors, Tasks, Segments, Services), with items conditionally disabled based on the user's capabilities. The right side includes a timezone selector using TimezoneMenuItems, a more-options menu, a layout selector that iterates over ExploreState.LAYOUTS, and a panel toggle button.

Usage

Rendered at the top of the Explore view as the primary header bar. It provides global navigation, timezone configuration, layout switching between different module arrangements, and the ability to show or hide side panels.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/explore-header-ber/explore-header-bar.tsx
• Lines: 1-213

Signature

export interface ExploreHeaderBarProps {
  capabilities: Capabilities;
  timezone: Timezone | undefined;
  onChangeTimezone(timezone: Timezone | undefined): void;
  moreMenu: JSX.Element;
  layout: ExploreModuleLayout;
  onChangeLayout(layout: ExploreModuleLayout): void;
  onShowHideSidePanel(alt: boolean): void;
}

export const ExploreHeaderBar = React.memo(
  function ExploreHeaderBar(props: ExploreHeaderBarProps): JSX.Element
);

Import

import { ExploreHeaderBar } from './views/explore-view/components/explore-header-ber/explore-header-bar';

I/O Contract

Inputs

Name	Type	Required	Description
capabilities	Capabilities	Yes	The user's capabilities determining which navigation items are enabled
timezone	Timezone or undefined	Yes	The currently selected timezone; defaults to 'Etc/UTC' for display
onChangeTimezone	(timezone: Timezone or undefined) => void	Yes	Callback invoked when the user selects a new timezone
moreMenu	JSX.Element	Yes	A pre-built menu element rendered in the "More options" popover
layout	ExploreModuleLayout	Yes	The current active layout identifier
onChangeLayout	(layout: ExploreModuleLayout) => void	Yes	Callback invoked when the user selects a different layout
onShowHideSidePanel	(alt: boolean) => void	Yes	Callback for toggling side panel visibility; alt parameter reflects Alt key state

Outputs

Name	Type	Description
JSX.Element	ReactElement	A Navbar component with navigation, timezone, layout, and panel controls

Usage Examples

Explore Header Bar

<ExploreHeaderBar
  capabilities={capabilities}
  timezone={timezone}
  onChangeTimezone={setTimezone}
  moreMenu={<MoreOptionsMenu />}
  layout={currentLayout}
  onChangeLayout={setLayout}
  onShowHideSidePanel={(alt) => toggleSidePanel(alt)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development