# CSS to set currently selected tab on v2 tab layout

**URL:** https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [4 August 2025 16:08 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499 "2025-08-04T16:08:42Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)
#### Post date: [4 August 2025 16:08 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/1 "2025-08-04T16:08:42Z")

</div>

Apologies if this has been asked. Has anyone worked out how to apply a custom CSS to show the currently selected tab in a v2 tab layout? Currently there is no way to no what tab your on.

 ![v2_tabs](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf6609d013df2ea202625c33f8867be224d1e4f2.png)

---

<div class="post-metadata">

### Author: ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)
#### Post date: [4 August 2025 19:12 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/2 "2025-08-04T19:12:23Z")

</div>

The ui-control node sends a payload with the tab name when you switch tabs (msg.name). I use that to trigger different flows for each page.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/83a0e77db5391b4f216a043fc41b1e9bb6b9372d.png)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 August 2025 19:20 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/3 "2025-08-04T19:20:38Z")

</div>

> [@iiLaw](#):
>
> Currently there is no way to no what tab your on.

That is not correct and you can see that in your screenshot. The current tab is highlighted, the underlying HTML looks like this:

```html
<a data-v-dd700828="" class="v-list-item v-list-item--active v-list-item--link v-list-item--nav v-theme--nrdb v-list-item--density-default v-list-item--one-line v-list-item--rounded v-list-item--variant-text" tabindex="-2" href="/nr/dashboard/p1" aria-current="page" data-nav="a6c08cd025d0c2bd"><span class="v-list-item __overlay"></span><span class="v-list-item__ underlay"></span><div class="v-list-item __prepend"><!----><i class="mdi-home mdi v-icon notranslate v-theme--nrdb v-icon--size-default" aria-hidden="true" density="default"></i><div class="v-list-item__ spacer"></div></div><div class="v-list-item__content" data-no-activator=""><div class="v-list-item-title">P1 (/p1)</div><!----><!----></div><div class="v-list-item__append"><!----><div class="v-list-item__spacer"></div></div></a>

```

Urm, yes, not terribly helpful! 🙂  
The key class seems to be `v-list-item--active` - so you perhaps simply need to override that if you want to customise the look?

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 August 2025 19:23 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/4 "2025-08-04T19:23:38Z")

</div>

> [@iiLaw](#):
>
> Currently there is no way to no what tab your on.

The current tab should have a dark line at the bottom. No idea when this was introduced.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd393a38cb53108ba3106cfb574f41550454af1f.png)

Anyway this seems to work

```auto
.v-tab-item--selected {
    background-color: hsl(0, 61.5%, 94.9%);
    border: 2px solid pink;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none;
}

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3adead17c3f69bd2f96d0ace493e7dee0ca30316.png)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 August 2025 19:32 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/5 "2025-08-04T19:32:24Z")

</div>

Ah, I was looking at the wrong "tabs" 🙂

```html
<button data-v-5f213885="" type="button" class="v-btn v-tab-item--selected v-tab--selected v-theme--nrdb v-btn--density-default v-btn--size-default v-btn--variant-text v-tab" tabindex="0" role="tab" aria-selected="true" value="a9c7595384727d2e"><span class="v-btn __overlay"></span><span class="v-btn__ underlay"></span><!----><span class="v-btn __content" data-no-activator="">P2G1<div class="v-tab__ slider"></div></span><!----><!----></button>

```

There seem to be 2 possible CSS classes then: `v-tab-item--selected` and `v-tab--selected`.

---

<div class="post-metadata">

### Author: ![iiLaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iilaw/32/14782_2.png) [@iiLaw](https://discourse.nodered.org/u/iiLaw)
#### Post date: [4 August 2025 19:44 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/6 "2025-08-04T19:44:21Z")

</div>

> [@jbudd](#):
>
> ```auto
> .v-tab-item--selected {
> background-color: hsl(0, 61.5%, 94.9%);
> border: 2px solid pink;
> border-radius: 10px 10px 0 0 !important;
> border-bottom: none;
> }
> 
> ```

Thanks to you both for taking the time look at this ..  
@TotallyInformation I can see why I missed that my zoom was 90% !!  
@jbudd that works a treat.

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [5 August 2025 08:44 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/7 "2025-08-05T08:44:36Z")

</div>

That’s a bug, not a feature. I’ll take a look

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 September 2025 08:44 UTC](https://discourse.nodered.org/t/css-to-set-currently-selected-tab-on-v2-tab-layout/98499/8 "2025-09-04T08:44:48Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.