ūüĒ• Join our¬†free ¬†SvelteKit Workshop on June 28 -¬†only 9 seats remaining ! ūüí®¬†Save Your Spot!

Conditional Classes in Svelte

Justin's profile pic

Justin Ahinon

Table of Contents

    Conditional Classes in Svelte

    Welcome to the amazing world of Svelte, where building highly interactive web applications is a breeze . In this tutorial, we will learn how to use conditional classes in Svelte.

    What are conditional classes?

    If you've been building web applications with one of the UI frameworks out there, you probably came across a situation where you need an element to have some style based on some conditions. For example, you might want to change the background color of a button when it's clicked . This is where conditional classes come in handy.

    If you want to read more about how Svelte handles CSS in general, check out this article.

    They can be incredibly helpful when you want to change the appearance of your web app based on user interactions, data changes, or other events.

    Here is some rough code about how you would do something like that in vanilla JavaScript:

    JAVASCRIPT

    This code is pretty straightforward. We are selecting the button and the body element, then we are adding an event listener to the button that toggles the  dark  class on the body element.

    But now imagine you are building a large application with a lot of elements that need to have conditional classes; responding to various interactions, events, and data changes. This can get messy pretty quickly, and you will wish to have a more declarative way to do this.

    Conditional classes in Svelte

    At its core, Svelte compiles your declarative code to vanilla JavaScript . This allows the language to come up with an easy way to write complex logic in a declarative way.

    Let's see a naive example of how we can use conditional classes in Svelte:

    SVELTE

    In this code, the reactive variable  isDark 's value is set to  false  by default. It is changed to its opposite whenever the button is clicked. Then, we are conditionally adding the  dark  class to the body element based on the value of  isDark .

    Using the class directive

    While the above code works well, it can be improved by using the Svelte  class  directive. The  class  directive allows you to bind some class names to an element class attribute. Let's see how we can use it for the example above:

    SVELTE

    Practical example: setting active class on a navigation menu in SvelteKit

    Let's say you have a navigation menu with a list of links. You want to set the active class on the link that is currently active. Here is how you would do that with SvelteKit:

    SVELTE

    The  $app/stores  module comes from SvelteKit and contains information about the current page. We are using the  $page.url.pathname  to check if the current link is active or not.

    Conclusion

    Conditional classes are a great way to add some style to your web app based on some conditions. They are especially useful when you are building large applications with a lot of elements that need to have conditional classes.

    You can either use ternary or conditional expressions in an element class attribute or use the  class  directive to bind some classes to an element class attribute.

    You might also like these blog posts

    Svelte and CSS

    Svelte and CSS

    Learn how Svelte handles CSS and styles, and how you can take advantage of that for your Svelte and SvelteKit applications.

    Svelte vs SvelteKit: What's the Difference?

    Svelte vs SvelteKit: What's the Difference?

    Find out what's Svelte, SvelteKit, what is the difference between the two and what you can do with both.