Course Path Navigator
Course map: modules, locks, progress and skills, a list on narrow screens. Pro · Work and teams › Sales and processes
A course as a path of modules: what is done, in progress, ready or locked behind which module, drawn as a map with the connections between modules (a list on narrow screens). The details of the selected module say what it teaches, what it needs and how to go on; overall progress and earned skills on top.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add course-path-navigatornpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { CoursePathNavigator } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
modules * | CourseModule[] | Modules with their requirements and progress. | |
selected | string | null | Module shown in the details. | |
defaultSelected | string | null | Initial module when uncontrolled. Default: the one to continue. | |
onSelectedChange | (id: string | null) => void | Called when the learner picks a module. | |
onStart | (module: CourseModule) => void | Called by Start / Continue / Review. | |
loading | boolean | false | Data is loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the path. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
locale | string | BCP 47 locale for numbers. | |
labels | Partial<Omit<CoursePathNavigatorLabels, 'statuses'>> & { statuses?: Partial<Record<ModuleStatus, string>> } | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
- Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
- Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
- Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
- Calendar View — Event calendar
- Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
- Kanban Board — Task board
- Gantt Chart — Gantt charts with dependencies and drag to reschedule
- Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
- Team Members — Team members: roles, email invites, pending invitations, seat count
- Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
- Activity Feed — Activity feed
Previous: Onboarding Checklist · Next: Team Members · All Work and teams