# Perspective: How can I hide a tab in a tab container?

**URL:** <https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890>\
**Category:** Ignition\
**Created:** [March 25, 2021, 4:53am UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890 "2021-03-25T04:53:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 25, 2021, 4:53am UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/1 "2021-03-25T04:53:28Z")

</div>

I need to hide tabs based on conditions, can I do it?

Edit: I’m using a custom view for my tabs with bindings on my viewparams

---

<div class="post-metadata">

**Author:** ![calimero100582](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/calimero100582/32/18630_2.png) [@calimero100582](https://forum.inductiveautomation.com/u/calimero100582)\
**Post date:** [March 25, 2021, 1:54pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/2 "2021-03-25T13:54:42Z")

</div>

In the object on each tab define a custom value “tabKey” that corresponds to the tab the element belong  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/2/e22ff7ab7aa3d874b42274a9c98316ce1659914e.png)

On tabIndex define the following binding (don’t know it this is possible with an expression)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1cd3deb49b5558be3b1c2ef46bf89f0a47d61cd6.png)

Add/Remove tabs as you wish in the tab controller  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/08a0cf526e514e44e80a74750ecf264d15bb199b.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 25, 2021, 7:41pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/3 "2021-03-25T19:41:48Z")

</div>

Is now a bad time to say that I’m using custom views with bound view params for my tabs? 😅 But otherwise, binding to the tabs prop would definitely work

---

<div class="post-metadata">

**Author:** ![calimero100582](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/calimero100582/32/18630_2.png) [@calimero100582](https://forum.inductiveautomation.com/u/calimero100582)\
**Post date:** [March 25, 2021, 7:43pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/4 "2021-03-25T19:43:47Z")

</div>

sorry, but I don’t see how this prevent this from working

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 25, 2021, 7:54pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/5 "2021-03-25T19:54:44Z")

</div>

Sorry, you’re right, I skimmed a little too quickly and assumed.

Yep, this will work 🙂 basically forcing the shown index to nothing if it ‘doesn’t exist’ (technically it does still exist…)  
I actually created a `hideTab` prop on my custom tab view, so I think I’ll use this to check against as its already bound.  
Cheers!

---

<div class="post-metadata">

**Author:** ![nathan1](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@nathan1](https://forum.inductiveautomation.com/u/nathan1)\
**Post date:** [February 18, 2022, 8:20pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/6 "2022-02-18T20:20:54Z")

</div>

Here’s a function I use to hide/show tabs. Similar concept as @calimero100582 but in script.

```auto
def toggleTab(self, tab, visible):
		tabs = []
		idx = 0
		logger = system.util.getLogger('mylog')
		logger.info('toggling tab: %s %s' % (tab, visible))
		
		for c in self.children:
			metaTab = c.meta.tab
			name = c.meta.name
			logger.info('testing tab: %s %s' % (metaTab, name))
			
			if not metaTab:
				logger.warn('missing meta.tab on container: %s' % c.meta.name)
				return		
				
			if metaTab == tab:
				c.position.tabIndex = idx if visible else -1
			
			if c.position.tabIndex > -1:
				c.position.tabIndex = idx
				tabs.append(metaTab)
				idx = idx + 1
				logger.info('visible tab: %s' % metaTab)
			else:
				logger.info('hidden tab: %s' % metaTab)
						
		self.props.tabs = tabs

```

**self** is the TabContainer instance and you have to add a meta.tab value on each container in your TabContainer that corresponds to its associated tab.

---

<div class="post-metadata">

**Author:** ![dhiraj.pawar](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@dhiraj.pawar](https://forum.inductiveautomation.com/u/dhiraj.pawar)\
**Post date:** [May 12, 2022, 11:46am UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/7 "2022-05-12T11:46:38Z")

</div>

Hello,  
How can i hide a single tab in tab container based on condition. I have created 12 tab. As per view changes tab should have to hide.

Thanks

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 12, 2022, 12:20pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/8 "2022-05-12T12:20:07Z")

</div>

I don’t think there’s a built-in way to achieve this right now, but it can be done with css injection.  
See [this thread](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/16).

I see two ways:  
Make a style class for each one of the tabs you want to hide (`hide_tab1`, `hide_tab2`, etc).  
In each of those style classes, put this in the `background-position` property (or any other property that lets you type things): `} .psc-hide_tabX .tab-menu-item[data-index="X-1"] {display: None } {`  
Of course you’ll have to change that to match the class and tab:  
for tab 2 it will be `} .psc-hide_tab2 .tab-menu-item[data-index="1"] {display: None } {`,  
for tab 3 `} .psc-hide_tab3 .tab-menu-item[data-index="2"] {display: None } {`  
etc.  
Then add the appropriate classes to your tab container’s style when changing views/doing whatever triggers the hiding of some tabs.

solution 2:  
Add a custom property on your tab container to store the indices of the tabs you want to hide. You’ll have to update this property whenever you need to hide/display tabs.  
Add any property to the tab container’s style, and bind it to your custom property.  
then add a script transform, and put this in:

```python
return "}} {} {{display: None }} {{".format(', '.join(".tab-menu-item[data-index='{}']".format(tab) for tab in value))

```

note that the tab indices are 0-based. If you’re putting 1-based indices in the custom prop, you’ll need to adjust them.

---

<div class="post-metadata">

**Author:** ![dhiraj.pawar](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@dhiraj.pawar](https://forum.inductiveautomation.com/u/dhiraj.pawar)\
**Post date:** [May 12, 2022, 1:00pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/9 "2022-05-12T13:00:59Z")

</div>

Thanks for response.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 12, 2022, 1:01pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/10 "2022-05-12T13:01:12Z")

</div>

I just tried method 2 and I can’t seem to be able to make it work… first method works though.  
I’ll try to figure out what’s wrong with it

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 12, 2022, 1:40pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/11 "2022-05-12T13:40:38Z")

</div>

itsnt it easier to do the solution above and just remove the tab from the tabs prop?

> [@calimero100582](#):
>
> On tabIndex define the following binding (don’t know it this is possible with an expression)  
> ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1cd3deb49b5558be3b1c2ef46bf89f0a47d61cd6.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 12, 2022, 1:47pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/12 "2022-05-12T13:47:39Z")

</div>

You’re absolutely right. I didn’t read the previous posts, supposing that no solution had been found, since someone was asking again… I guess he didn’t read either !

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 12, 2022, 1:52pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/13 "2022-05-12T13:52:34Z")

</div>

And your second idea wont work btw. It might have worked if perspected used scss instead of css tho  
(it has nested classes) Though actually not sure if that woul even render in run time…xD

---

<div class="post-metadata">

**Author:** ![drojas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drojas/32/3403_2.png) [@drojas](https://forum.inductiveautomation.com/u/drojas)\
**Post date:** [May 12, 2022, 3:19pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/14 "2022-05-12T15:19:50Z")

</div>

Shameless plug here, but I tend to combine a tab control with a Dynamic View. That way, I control what tabs are shown and the Dynamic View loads the view based on the tab selected.

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2196/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

---

<div class="post-metadata">

**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\
**Post date:** [July 24, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/15 "2024-07-24T14:20:41Z")

</div>

You can use indexOf in an expression binding to avoid the script transform:

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

---

<div class="post-metadata">

**Author:** ![Eirik\_Myklestad\_Hjoe](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@Eirik\_Myklestad\_Hjoe](https://forum.inductiveautomation.com/u/Eirik_Myklestad_Hjoe)\
**Post date:** [May 6, 2026, 9:21am UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/16 "2026-05-06T09:21:46Z")

</div>

Clean way to “hide” Perspective tabs without breaking `tabIndex`:

Instead of removing tabs from `props.tabs`, just set:

```python
newTab["disabled"] = True

```

and use:

```python
props.tabStyle.disabled.display = none

```

Result:

- Stable `tabIndex`

- No CSS hacks

- No dynamic reordering

- Much simpler logic

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [May 6, 2026, 2:20pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/17 "2026-05-06T14:20:25Z")

</div>

You can also do this with property bindings. It's a little weird how it works so I made a demonstration video. Basically, you turn the tab into an object and add properties to it to enable the various other properties. Full list of properties can be found on the help page.

> **[Perspective - Tab Container | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-container-palette/perspective-tab-container)**
>
> The Tab container uses tabs as navigation buttons arranged together with the selected tab highlighted.

![Tab Containers](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/893c14f071b204ccbc75708a95026673375caf22.gif)

Note that this is not the same as hiding the tab but you could do conditional styling on the tab also. I just wanted to include this in case it's helpful for someone searching the forums down the road.

---

<div class="post-metadata">

**Author:** ![Nol](https://avatars.discourse-cdn.com/v4/letter/n/8e8cbc/32.png) [@Nol](https://forum.inductiveautomation.com/u/Nol)\
**Post date:** [May 6, 2026, 3:44pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/18 "2026-05-06T15:44:37Z")

</div>

> [@Steve\_Laubach](#):
>
> Note that this is not the same as hiding the tab but you could do conditional styling on the tab also. I just wanted to include this in case it's helpful for someone searching the forums down the road.

Add display: none to your disabled tab style and it hides them

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 6, 2026, 4:13pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/19 "2026-05-06T16:13:53Z")

</div>

> [@Eirik\_Myklestad\_Hjoe](#):
>
> just set:
> 
> ```python
> newTab["disabled"] = True
> 
> ```

> [@Steve\_Laubach](#):
>
> Basically, you turn the tab into an object and add properties to it to enable the various other properties

This is actually what @Eirik_Myklestad_Hjoe suggested doing, just didn't mention about setting the tab array item to an object which is probably a good mention if someone hasn't done this before/know it's possible

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [May 22, 2026, 7:03pm UTC](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890/20 "2026-05-22T19:03:38Z")

</div>

I usually use:  
`{ disabled = true, text = null }`

[Next page](https://forum.inductiveautomation.com/t/perspective-how-can-i-hide-a-tab-in-a-tab-container/44890.md?page=2)