Lesson Navigation

Lesson navigation for course content

SaaSLMS

Overview

LessonNavigation provides a navigation bar for course content consumption. It shows the current lesson title and module context, with previous and next lesson buttons. Includes an optional "Mark as Complete" button that changes state once the lesson is completed. Handles edge cases for first/last lessons in a module.

Usage

import { LessonNavigation } from "@leanicon/web-builder-library/saas";

<LessonNavigation
  currentLesson={currentLesson}
  previousLesson={prevLesson}
  nextLesson={nextLesson}
  moduleName="React Fundamentals"
  onPrevious={() => navigateToLesson(prevLesson.id)}
  onNext={() => navigateToLesson(nextLesson.id)}
  onComplete={() => markLessonComplete(currentLesson.id)}
  isCompleted={lessonCompleted}
/>;

Variants

Default

React Fundamentals

Understanding JSX Syntax

15 min

First Lesson

React Fundamentals

Introduction to React

10 min

Last Lesson

React Fundamentals

Components and Props

20 min

Completed

React Fundamentals

Understanding JSX Syntax

15 min

Without Complete Button

React Fundamentals

Understanding JSX Syntax

15 min

Dark

React Fundamentals

Understanding JSX Syntax

15 min

No Duration (code only)

<LessonNavigation
  currentLesson={{ id: "les-1", title: "Quick Introduction", order: 1 }}
  nextLesson={{ id: "les-2", title: "Understanding JSX Syntax", durationMinutes: 15, order: 2 }}
  moduleName="Getting Started"
  onNext={() => navigateToLesson("les-2")}
  onComplete={() => markComplete("les-1")}
/>