Add attribute value dynamic | Astro Lounge | Page 1

still heron · 2024-01-25T19:29:10.254Z

I have this link Guild Overview How do I add the active class dynalically to the list of classes?

Hi @still heron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

In Astro, you can dynamically add classes to an element using the class:list utility attribute. This attribute allows you to combine classes on an element dynamically. Here's how you can use it:

---
const { guildId, path } = Astro.props;
const isActive = ("/guild/" + guildId) === path;
---
<a href={"/guild/" + guildId} class:list={['text-gray-900', 'dark:text-white', 'hover:underline', { 'active': isActive }]}>Guild Overview</a>

In this example, the active class will be added to the list of classes if the isActive variable is truthy. If isActive is falsy, the active class will not be included.

For more information, you can refer to the Astro documentation on combining classes with `class:list` (https://docs.astro.build/en/guides/styling#combining-classes-with-classlist).

#Add attribute value dynamic

For more information, you can refer to the Astro documentation on combining classes with `class:list` (https://docs.astro.build/en/guides/styling#combining-classes-with-classlist).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#Add attribute value dynamic

For more information, you can refer to the Astro documentation on combining classes with class:list (https://docs.astro.build/en/guides/styling#combining-classes-with-classlist).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Astro documentation on combining classes with `class:list` (https://docs.astro.build/en/guides/styling#combining-classes-with-classlist).