Overview
ScopeJump provides a command-style interface for quickly navigating between scopes. Inspired by VS Code, Linear, and Notion, it enables instant navigation with search filtering and full keyboard support.
Key Features
- Instant search/filter across all scopes (programs and projects)
- Full keyboard navigation (type to filter, arrows to navigate, Enter to select)
- Hierarchical display with programs and nested projects
- Custom icons for programs and projects with sensible defaults
Layout Availability
ScopeJump provides fast keyboard-driven navigation between scopes. It's designed to slot into the top of LeftNav in LayoutShell.
LayoutShell
Slots into LeftNav header area
LayoutFocus
Not available in this layout
LayoutWizard
Not available in this layout
LayoutCard
Not available in this layout
LayoutBlank
Not available in this layout
Examples
Interactive Demo
Click the button to open the scope navigator. Try typing to search, or use arrow keys to navigate.
Current scope: Home
With Many Items
ScopeJump handles large lists gracefully with a scrollable container and instant search filtering.
Scope State Variants
The trigger button displays the current scope with appropriate icon.
Home Scope
Program Scope
Project Scope
Keyboard Navigation
Full keyboard support for efficient navigation.
| Shortcut | Action |
|---|---|
| Type | Filter items |
| ↑ ↓ | Navigate list |
| Enter | Select item |
| Escape | Close popover |
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
currentScope | ScopeJumpCurrentScope | required | Current active scope for display on trigger button |
programs | ScopeJumpProgram[] | required | Array of programs with nested projects |
homeHref | string | "/" | URL for the Home navigation item (default: '/') |
className | string | - | Additional CSS classes for the trigger button |
onScopeChange | (scope) => void | - | Callback when scope changes (for analytics, etc.) |
ScopeJumpCurrentScope Interface
| Prop | Type | Default | Description |
|---|---|---|---|
type | "home" | "program" | "project" | - | The type of scope (home, program, or project) |
id | string? | - | Unique identifier (required for program and project types) |
name | string | - | Display name for the scope |
icon | IconDefinition? | - | Optional custom icon for the scope |
ScopeJumpProgram Interface
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique identifier for the program |
name | string | - | Display name for the program |
href | string | - | Navigation URL for the program |
icon | IconDefinition? | - | Optional custom icon for the program |
projects | ScopeJumpProject[] | - | Array of projects nested under this program |
ScopeJumpProject Interface
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique identifier for the project |
name | string | - | Display name for the project |
href | string | - | Navigation URL for the project |
icon | IconDefinition? | - | Optional custom icon for the project |
Usage
import { ScopeJump } from '@/ui/components';
import type { ScopeJumpCurrentScope, ScopeJumpProgram } from '@/ui/components/scope-jump';
// Define programs with nested projects
const programs: ScopeJumpProgram[] = [
{
id: 'alpha',
name: 'Alpha Program',
href: '/programs/alpha',
projects: [
{ id: 'phoenix', name: 'Phoenix', href: '/programs/alpha/projects/phoenix' },
{ id: 'titan', name: 'Titan', href: '/programs/alpha/projects/titan' },
],
},
{
id: 'beta',
name: 'Beta Program',
href: '/programs/beta',
icon: faFlask, // Optional custom icon
projects: [
{ id: 'hydra', name: 'Hydra', href: '/programs/beta/projects/hydra' },
],
},
];
// Track current scope
const [currentScope, setCurrentScope] = useState<ScopeJumpCurrentScope>({
type: 'home',
name: 'Home',
});
// Render the component
<ScopeJump
currentScope={currentScope}
programs={programs}
homeHref="/"
onScopeChange={(scope) => {
setCurrentScope(scope);
// Analytics, etc.
}}
/>