Skip to main content

In this episode of our Storyline Magic Series for Articulate Storyline 360 developers, we want to show you a practical enhancement which you can use to add separator lines to the navigation menu in Articulate Storyline 360. This approach allows for clearer, organised grouping of menu items, creating a more streamlined experience for learners.

Storyline doesn’t currently offer native support for menu separators, so we’ll achieve this by using a JavaScript solution. In the tutorial, we’ll walk through the process of setting up an Execute JavaScript trigger on either the starting slide or master slide, giving you full control over where these dividers appear. It’s a simple approach to a feature that adds immediate value to navigation-heavy courses.

Through JavaScript, we can adjust the properties of specific menu items in the navigation to display as non-clickable separator lines. The code handles styling details such as line height and position to ensure a subtle, cohesive look that integrates with the existing Storyline interface.

If you’re ready to add this useful enhancement to your own Storyline projects, you can watch the full tutorial on our YouTube channel.

You can also find the code example below, which we walk through step-by-step in the video:

const listItems = document.querySelectorAll('ul li');

listItems.forEach((li) => {
    const slideTitle = li.querySelector('div').getAttribute('data-slide-title');
    if (slideTitle == '---') {
        li.style.pointerEvents = 'none';
        li.style.height = '18px';
        
        const separatorLine = document.createElement('div');
        separatorLine.style.width = '85%';
        separatorLine.style.height = '1px';
        separatorLine.style.backgroundColor = '#FFF';
        separatorLine.style.position = 'absolute';
        separatorLine.style.top = '50%';
        separatorLine.style.left = '0px';
        separatorLine.style.margin = '0 0 0 33px';
        separatorLine.style.minHeight = 'unset';
        
        li.innerHTML = '';
        li.appendChild(separatorLine);
    }
});

Catch this episode of our Storyline Magic Series on YouTube to see the complete walkthrough, and visit the Discover eLearning website for a full breakdown of the code we used. Don’t forget to subscribe to our channel for more advanced Storyline tips, and if you’re ready to elevate your skills further, check out our Advanced eLearning Developer Series.

A copy of the written transcript for this episode of our Storyline Magic Series is available to read here:

In this video, I’d like to show you how to create an Execute JavaScript trigger in Articulate Storyline 360 which you can use to easily place separator lines into the sidebar navigation menu.

So by default, Storyline allows us to organise the navigation menu built into the player interface using page links or custom headings into which links can be arranged under a dropdown.

Today, we’re going to be building the ability to add separator lines to the menu wherever we would like. Perhaps one day this feature might get added to Storyline which would be a nice thing, but for the time being this little Storyline hack is a useful way of adding further organisation to the navigation menu.

To get started, we’ll be setting up our Execute JavaScript trigger on the starting slide when the timeline starts.

This is because I have my activity set to not resume on restart, but if you are using this setting then you can just add your Execute JavaScript trigger to the master slide of your project instead.

To that end we could also update the opening slide properties here so that it resumes from its saved state when revisiting.

Let’s open the JavaScript editor window now and start things off in our code by selecting all the ‘List Item’ or LI tag elements within the navigation’s ‘Unordered List’ or UL tag element. To do this, we’ll use document.querySelectorAll(‘ul li’);. By selecting all list items, we can target specific headers in the menu based on their attributes.

Next, we’re going to loop through each LIST ITEM element with a forEach loop, so we can examine each list item individually.

Now, here’s the main part to all of this: we’re going to look for items where the data-slide-title attribute is set as ‘three hyphens’ like this…

This attribute is going to act as our separator marker, meaning all we need to do is create a new heading in the menu using three hyphens in order for our code to take effect.

I’ll type const slideTitle = li.querySelector(‘div’).getAttribute(‘data-slide-title’);

Then, we’ll check if slideTitle == ‘—‘. If that’s true, then we know it’s a separator line, and we can apply our styling.

Once we’ve identified these items, we’ll set li.style.pointerEvents = ‘none’; to make sure the separator lines aren’t clickable. Next, li.style.height = ’18px’; adjusts the height of each line item. Feel free to adjust this height if you’d prefer to have more space between sections.

Now we’ll create the actual separator line. This is done by creating a new div element and adding styles to it. For the line itself, I’m setting the width to 85% and height to 1 pixel. I’m also setting the background colour to white with separatorLine.style.backgroundColor = ‘#fff’;. These dimensions create a subtle yet visible line that fits neatly into the sidebar.

To position the line precisely, I’ll set position = ‘absolute’, and I’ll adjust its placement with top, left, and margin properties adding a few pixels of margin space to the left-hand edge.  It’s also very important that we apply an unset rule to the element’s minHeight value.

Once the line’s styling is done, we’ll remove the original three hyphens from within the LIST ITEM using li.innerHTML = ”;. This ensures that our separator line is now the only content inside this item. Finally, we append the separator line to the LI, and that completes our code!

So if we now go ahead and preview the project, you’ll see line items appear wherever we use three hyphens as a heading title in the sidebar navigation menu, which can help to better organise the sections of your course.

And there we have it! Another useful enhancement hack that you can call upon whenever you might need it for your Storyline projects.

If you want to check the code you’ve written when following along with this video then you’ll find this written down over on the Discover eLearning website.

If you found this tutorial helpful, please like the video and subscribe to our channel for more Storyline Magic coming very soon. And for those of you looking to dive deeper into advanced Storyline development techniques, then be sure to check out our Advanced eLearning Developer Series found over on the Discover eLearning website.

Thanks for watching, and I’ll see you in the next one!

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has over 15 years’ experience working in both private and public sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.