Overview
ScopeViewToggle provides navigation between three primary views within any scope: Hub (overview), Timeline (activity feed), and Dashboard (analytics). It displays below ScopeJump in the LeftNav and adapts its tooltip labels based on the current scope.
Key Features
- Three-state toggle: Hub, Timeline, Dashboard
- Scope-aware tooltips (e.g., "Your Hub", "Beta Program Timeline")
- Active state highlighting when on current view
- Link navigation for inactive states
- Full-width layout that stretches to fill container
- Built into LeftNav by default when scopeJump is enabled
Layout Availability
ScopeViewToggle is designed for use within LeftNav and is included by default when scopeJump is enabled.
LayoutShell
Via LeftNav integration
LayoutForm
Not available
LayoutWizard
Not available
LayoutCard
Not available
LayoutBlank
Not available
Examples
Interactive Demo
Click the toggle buttons to see the active state change
Active view: hub
Scope-Aware Tooltips
Tooltip labels adapt based on the current scope type
User Scope (Home)
Tooltips show "Your Hub", "Your Timeline", etc.
Program Scope
Tooltips show "Beta Program Hub", etc.
Project Scope
Tooltips show "Phoenix Hub", etc.
Active State Variants
Each view can be the active state
Hub Active
Timeline Active
Dashboard Active
No Active State
When no view is active, all buttons appear as links
Role-Based Visibility
Dashboard is only available to Owners and Builders. Use showDashboard={false} for Participants.
Owner / Builder
Full access - all three views visible
Participant
No dashboard access - only Hub and Timeline
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
currentScope | ScopeJumpCurrentScope | required | Current scope information used to generate tooltip labels |
activeView | "hub" | "timeline" | "dashboard" | - | Currently active view (shows highlighted state) |
hubHref | string | "#" | Navigation URL for Hub view |
timelineHref | string | "#" | Navigation URL for Timeline view |
dashboardHref | string | "#" | Navigation URL for Dashboard view |
showDashboard | boolean | true | Show Dashboard button. Set to false for Participants who lack dashboard access. |
className | string | - | Additional CSS classes for the container |
ScopeView Type
type ScopeView = 'hub' | 'timeline' | 'dashboard';
Usage
Standalone Usage
import { ScopeViewToggle } from '@/ui/components';
import type { ScopeView } from '@/ui/components';
import type { ScopeJumpCurrentScope } from '@/ui/components/scope-jump';
// Current scope for tooltip labels
const currentScope: ScopeJumpCurrentScope = {
type: 'program',
name: 'Beta Program',
};
// Track active view
const [activeView, setActiveView] = useState<ScopeView>('hub');
// Render the component
<ScopeViewToggle
currentScope={currentScope}
activeView={activeView}
hubHref="/programs/123"
timelineHref="/programs/123/timeline"
dashboardHref="/programs/123/dashboard"
/>LeftNav Integration
ScopeViewToggle is included by default in LeftNav when scopeJump is enabled. You can configure the active view and hrefs, or disable it entirely.
import { LeftNav } from '@/ui/layouts';
// ScopeViewToggle is included by default when scopeJump is enabled
<LeftNav
items={navItems}
scopeJump={true}
scopeViewToggle={{
activeView: 'hub',
hubHref: '/programs/123',
timelineHref: '/programs/123/timeline',
dashboardHref: '/programs/123/dashboard',
}}
/>
// To hide it explicitly:
<LeftNav
items={navItems}
scopeJump={true}
scopeViewToggle={false}
/>