How to Toggle Classes in Svelte
You can use the class directive in Svelte to easily toggle classes on an element.
<!-- You can use the class: directive to toggle a class on an element -->
<!-- 🔴 Instead of -->
<li class="{active ? 'active' : ''}">Dashboard</li>
<!-- ✅ You can do -->
<!-- The two are equivalent -->
<li class:active={active}>Dashboard</li>
Copied to clipboard!
If both name and value match, you can also simplify things by omitting both the class name and the variable assignment as well:
<li class:active>Dashboard</li>Copied to clipboard!
You also have the option to define multiple classes at once, like so:
<li class:inactive class:hidden>Secrets</li>Copied to clipboard!
Looking to improve your skills? Learn how to build reactive apps with Svelte + Tailwind.
Resources:
📚 More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
