How to lock specific slides in Storyline’s menu bar.

In this tutorial, I’ll show you how to lock individual slides in the Storyline menu without using the default setting that locks everything. We’ll walk through two different approaches: one using Storyline’s built-in locking system, and another using custom icons for a more polished, visual cue. You’ll learn how to use JavaScript to control access based on conditions like slide views or quiz completions—and unlock them only when your learners meet specific criteria. Whether you want full control or just a cleaner learner experience, this step-by-step guide has you covered!

Below, you’ll find all JavaScript codes I used in the video.

Default Icons – Lock Menu Slides

var player = GetPlayer();
var LockApplied = player.GetVar("LockApplied");

var slideTitlesToLock = ["Item 1","Item 2"]; // If you want to add mutliple variables format the items like this ["Item 1","Item 2", "Item 3"]


// Call the function
if (LockApplied === false){
    lockMenuItems(slideTitlesToLock);
}


function lockMenuItems(slideTitlesToLock) {
  console.log("Running Function");
  console.log(slideTitlesToLock);

  slideTitlesToLock.forEach(function(titleToLock) {
    var menuItem = document.querySelector('[data-slide-title="' + titleToLock + '"]');

    if (menuItem) {
      console.log("Found menu item for:", titleToLock);
      menuItem.classList.add("cs-locked");
      menuItem.style.pointerEvents = "none";
      menuItem.style.opacity = "0.5";
    } else {
      console.log("Menu item not found for:", titleToLock);
    }
  });
  player.SetVar("LockApplied",true);
}

Default Icon – Unlock Menu Slides

// Get Storyline variables
var player = GetPlayer();

var slidesToUnlock = ["Item 1"] // If you want to add mutliple variables format the items like this ["Item 1","Item 2", "Item 3"] 

unlockMenuItems(slidesToUnlock);


// This function will execute for each item it finds that matches the slidesToUnlock variable
function unlockMenuItems(slidesToUnlock) {
    console.log("Running Function");
    console.log(slidesToUnlock);

    slidesToUnlock.forEach(function(title) {
      var menuItem = document.querySelector('[data-slide-title="' + title + '"]');
  
      if (menuItem) {
        console.log("Found menu item for:", title);
        menuItem.classList.remove("cs-locked");
        menuItem.style.pointerEvents = "auto";
        menuItem.style.opacity = "1";
      } else {
        console.log("Menu item not found for:", title);
      }
    });
  }

---

Custom Icon – Lock Menu Slides

// Get Storyline variables
var player = GetPlayer();
var LockApplied = player.GetVar("LockApplied");

var slideTitles = ["Item 1", Item 2"] // If you want to add mutliple variables format the items like this ["Item 1","Item 2", "Item 3"]

if (LockApplied === false){
    lockMenuItems(slideTitles);
}

// Function to disable the menu item. Searches for each item in the variable slidesTitlesToLock and runs the for.each function.
function lockMenuItems(slideTitles) {
    console.log(slideTitles);

    slideTitles.forEach(function(title) {
        var menuItem = document.querySelector('[data-slide-title="' + title + '"]');

        if (menuItem) {
            console.log("Found menu item for:", title);
            menuItem.style.pointerEvents = "none";
            menuItem.style.opacity = "0.5";

            // Create the locked icon element
            var lockedIcon = document.createElement("img");
            lockedIcon.src = "story_content/external_files/lock_closed.svg"; // Replace with your icon's path or Base64 string
            lockedIcon.style.width = "16px"; // Adjust icon size as needed
            lockedIcon.style.height = "16px";
            lockedIcon.style.marginRight = "5px"; // Add spacing between icon and text
            lockedIcon.style.verticalAlign = "middle";

            // Insert the icon before the menu item's text
            menuItem.insertBefore(lockedIcon, menuItem.firstChild);
            menuItem.addEventListener("click", function(event) {
                event.preventDefault();
            });
        } else {
            console.log("Menu item not found for:", title);// Returns this printout if nothing is found. 
        }
    });
    player.SetVar("LockApplied",true);
}

Custom Icon – Unlock Menu Slides

// Get Storyline variables
var player = GetPlayer();


var slideTitlesToUnLock = ["Item 1"] // If you want to add mutliple variables format the items like this ["Item 1","Item 2", "Item 3"]


unlockMenuItems(slideTitlesToUnLock);


// Function to disable the menu item. Searches for each item in the variable slidesTitlesToLock and runs the for.each function.
function unlockMenuItems(slideTitlesToUnLock) {
    console.log(slideTitlesToUnLock);

    slideTitlesToUnLock.forEach(function(titleToLock) {
        var menuItem = document.querySelector('[data-slide-title="' + titleToLock + '"]');

        if (menuItem) {
            console.log("Found menu item for:", titleToLock);
            menuItem.style.pointerEvents = "auto";
            menuItem.style.opacity = "1";

            // Remove the locked icon
            var unlockedIcon = menuItem.querySelector("img");
            if (unlockedIcon) {
            unlockedIcon.src = "story_content/external_files/lock_open.svg"; // Replace with your icon's path or Base64 string. Disable this line if you want to remove the icon instead of replacing it.
            //menuItem.removeChild(lockedIcon); //Delete the "//" at the beginning of this line if you just want to remove the icon. 
                        }
            menuItem.removeEventListener("click",function(event){
            event.preventDefault();
            });
        } else {
            console.log("Menu item not found for:", titleToLock);// Returns this printout if nothing is found. 
        }
    });
}