# Where is the Perspective horizontal menu getting its selected left side border color from?

**URL:** <https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 31, 2026, 11:03pm UTC](https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678 "2026-01-31T23:03:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![r123](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@r123](https://forum.inductiveautomation.com/u/r123)\
**Post date:** [January 31, 2026, 11:03pm UTC](https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678/1 "2026-01-31T23:03:35Z")

</div>

When any of the folders or the root are selected there's a color added to the left side, like a breadcrumb. I can't find where this is defined. I can associate a style class and add element states like hover or selected or visited or checked none of them override this when an item has been selected.

**Element State**

| **State** | **Description** |
| --- | --- |
| active | The component is being activated by the user. For example, clicking on it with a mouse. |
| checked | The component is checked or toggled to an "on" state. Applies to checkboxes, radio buttons, etc. |
| default-choice | The component is the default selection in a group of related options. |
| disabled | The component is disabled and it cannot be selected, clicked on, typed into, or accept focus. |
| empty | Represents any element that has no children. Children can be either element nodes or text (including whitespace). |
| enabled | The component is enabled and can be selected, clicked on, typed into, or accept focus. |
| first-child | Changes the style for the first element among a group of sibling elements. |
| fullscreen | Automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations. |
| focus | The component receives focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's `tab` key. |
| hover | User hovers mouse over the component. |
| in-range | Element whose current value is within the range limits specified by the `min` and `max` attributes. |
| invalid | The component has an invalid input or selection based on the input type or validation rules. |
| last-child | The component is the last element among a group of sibling elements. |
| link | The component acts as a hyperlink, navigating the user to a different location when activated. |
| only-child | The component is the only child of its parent |
| out-of-range | The component's current value is outside the range limits specified by the `min` and `max` attributes |
| read-only | The component is read-only. |
| read-write | The component is available for read and write. |
| required | The component must be filled before submitting a form. |
| valid | The component has a valid input or selection based on the input type or validation rules. |
| visited | The component links that the user has already visited. |

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/d/ed4f987771d62c07e34486b9e0c1104ed8bb6147.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2dc9df7371d289bb50f87b296f59c32a8dc5c784.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 31, 2026, 11:14pm UTC](https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678/2 "2026-01-31T23:14:34Z")

</div>

The first step on this is usually to try and find it using your browser's Developer Tools:

- Launch the page in a browser.
- Hit F12 to open Developer Tools.
- Hit the Inspect button (usually top left corner) and then hover around until the feature you're looking for (the 'selected' border in this case) is highlighted. Click on it.
- The applicable styling will appear in the CSS pane. You can edit the properties there to change its appearance or make it disappear. Take not of what works.
- After that you might want to open the Designer's Advanced Stylesheet and create the modified style class there. You only need to add it the changes. Let everything else default.

Let us know how you get on.

---

<div class="post-metadata">

**Author:** ![r123](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@r123](https://forum.inductiveautomation.com/u/r123)\
**Post date:** [January 31, 2026, 11:26pm UTC](https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678/3 "2026-01-31T23:26:49Z")

</div>

I was just driving myself crazy trying to find the correct element state. It seems weird that there's not just like a `selected` option there to utilize.

There's no way to modify it inside the existing style class, like hover and active element states do?

I had tried to use inspect option but I didn't know about Select Element Tool. This appears to be what it's using if I change the width from 3px, it changes all the ones that have been selected.

I guess it's part of dark.css theme?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/832ae9d1f711f0fc7bd9eca106a74013023bc402.png)

`.ia_horizontalMenuComponent __item__ leftItem--active {`  
`border-left: 3px solid var(--callToAction);`  
`}`

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 31, 2026, 11:58pm UTC](https://forum.inductiveautomation.com/t/where-is-the-perspective-horizontal-menu-getting-its-selected-left-side-border-color-from/113678/4 "2026-01-31T23:58:15Z")

</div>

Try this in your Advanced Stylesheet:

```css
div.ia_horizontalMenuComponent __item__ leftItem--active
{
    border-left: 8px solid var(--success);
}

```

This is based on [Adding a style to an icon using the Horizontal Menu Component In Perspective - #2 by cmallonee](https://forum.inductiveautomation.com/t/adding-a-style-to-an-icon-using-the-horizontal-menu-component-in-perspective/74701/2).

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/3/d30ad773949d5b3c5f87e86adcff53b31fe7f658.png)

* * *

Try this too:

```css
div.ia_horizontalMenuComponent __item__ leftItem--active
{
    border-left: 44px solid var(--success);
    border-top: 22px solid #ffffff00;
    border-bottom: 22px solid #ffffff00;
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd3d4681a204ca8f9a7848e4a707158df02f3a51.png)