HeaderScopePicker

Top bar scope navigation with logo, name trigger, and searchable Command picker

Overview

HeaderScopePicker provides scope navigation in the TopBar header area. It displays a logo that links to the scope home, plus a text trigger that opens a searchable Command dropdown. The picker supports keyboard navigation with the shortcut key combination.

Key Features

Logo + scope name in top bar header
Logo click navigates to scope home page
Name click opens searchable Command picker
Keyboard shortcut (Cmd+/ or Ctrl+/) opens picker
Dark mode logo variant support
Hierarchical program/project structure in picker

Layout Availability

HeaderScopePicker is integrated into TopBar and used by default in LayoutShell.

LayoutShell

Via TopBar integration

LayoutFocus

Via TopBar integration

LayoutWizard

Not available

LayoutCard

Not available

LayoutBlank

Not available

Examples

Interactive Demo

Click the scope name to open the picker. Try the keyboard shortcut (Cmd+/ or Ctrl+/).

Scope Variants

Logo and text change based on current scope type

Home Scope

Shows Centercode logo + "Relay"

Program Scope

Shows program logo + program name

Project Scope

Shows program logo + project name

Keyboard Shortcut

Press Cmd+/ (Mac) or Ctrl+/ (Windows) to quickly open the scope picker from anywhere on the page.

Mac:Cmd+/

Windows:Ctrl+/

Props Reference

Prop	Type	Default	Description
`currentScope`	`ScopeJumpCurrentScope`	`required`	Current scope for display (type, id, name)
`programs`	`ScopeJumpProgram[]`	`required`	Available programs and their projects for the picker
`homeHref`	`string`	`"/"`	Home navigation URL
`onScopeChange`	`(scope: { type: string; id?: string }) => void`	`-`	Callback when scope is selected (for analytics)
`open`	`boolean`	`-`	Controlled open state for the picker
`onOpenChange`	`(open: boolean) => void`	`-`	Callback when open state changes
`className`	`string`	`-`	Additional CSS classes for the wrapper

Usage

Standalone Usage

import { HeaderScopePicker } from '@/ui/components';
import type { ScopeJumpCurrentScope, ScopeJumpProgram } from '@/ui/components/scope-jump';

// Define available programs and projects
const programs: ScopeJumpProgram[] = [
  {
    id: 'prog-1',
    name: 'Beta Program',
    href: '/programs/prog-1',
    projects: [
      { id: 'proj-1', name: 'iOS App v2.0', href: '/projects/proj-1' },
      { id: 'proj-2', name: 'Android App', href: '/projects/proj-2' },
    ],
  },
];

// Current scope (could be home, program, or project)
const currentScope: ScopeJumpCurrentScope = {
  type: 'project',
  id: 'proj-1',
  name: 'iOS App v2.0',
};

// Render in TopBar
<HeaderScopePicker
  currentScope={currentScope}
  programs={programs}
  onScopeChange={(scope) => console.log('Scope changed:', scope)}
/>

TopBar Integration

HeaderScopePicker is automatically enabled in TopBar when using LayoutShell. You can pass scopePicker={true} for automatic context derivation, or pass custom props.

import { TopBar } from '@/ui/components';

// When used with TopBar, pass scopePicker prop
// TopBar automatically derives props from ScopeProvider context
<TopBar
  scopePicker={true}
  userMenu={<UserMenu />}
/>

// Or pass custom HeaderScopePicker props
<TopBar
  scopePicker={{
    currentScope: { type: 'home', name: 'Home' },
    programs: [],
    homeHref: '/dashboard',
  }}
  userMenu={<UserMenu />}
/>

Prop

Type

Default

Description

currentScope

ScopeJumpCurrentScope

required

Current scope for display (type, id, name)

programs

ScopeJumpProgram[]

required

Available programs and their projects for the picker

homeHref

string

"/"

Home navigation URL

onScopeChange

(scope: { type: string; id?: string }) => void

-

Callback when scope is selected (for analytics)

open

boolean

-

Controlled open state for the picker

onOpenChange

(open: boolean) => void

-

Callback when open state changes

className

string

-

Additional CSS classes for the wrapper

import { HeaderScopePicker } from '@/ui/components'; import type { ScopeJumpCurrentScope, ScopeJumpProgram } from '@/ui/components/scope-jump'; // Define available programs and projects const programs: ScopeJumpProgram[] = [ { id: 'prog-1', name: 'Beta Program', href: '/programs/prog-1', projects: [ { id: 'proj-1', name: 'iOS App v2.0', href: '/projects/proj-1' }, { id: 'proj-2', name: 'Android App', href: '/projects/proj-2' }, ], }, ]; // Current scope (could be home, program, or project) const currentScope: ScopeJumpCurrentScope = { type: 'project', id: 'proj-1', name: 'iOS App v2.0', }; // Render in TopBar <HeaderScopePicker currentScope={currentScope} programs={programs} onScopeChange={(scope) => console.log('Scope changed:', scope)} />

import { TopBar } from '@/ui/components'; // When used with TopBar, pass scopePicker prop // TopBar automatically derives props from ScopeProvider context <TopBar scopePicker={true} userMenu={<UserMenu />} /> // Or pass custom HeaderScopePicker props <TopBar scopePicker={{ currentScope: { type: 'home', name: 'Home' }, programs: [], homeHref: '/dashboard', }} userMenu={<UserMenu />} />