# Mobile Friendly Navigation Bars **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 24, 2026, 1:16pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873 "2026-08-24T13:16:20Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![MG3](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mg3/32/84125_2.png) [@MG3](https://forum.inductiveautomation.com/u/MG3)\ **Post date:** [August 24, 2026, 1:16pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/1 "2026-08-24T13:16:20Z")
Hi All, I believe this has been talked about a _long_ time ago but I'm trying to create a Navigation Bar that is responsive in Perspective. Essentially, when a given breakpoint is reached I want my docked view to no longer show on the left side of the screen and instead swap to a different docked view on the bottom of the screen. I know you can make docked views appear at a certain breakpoint but is there a way to get them to disappear when a certain breakpoint is reached? I have previously achieved this using the advanced styling and writing custom CSS that target IA's inbuilt classes but I really want this as simple as possible. I just find it hard to believe this wouldn't be available as it would be a huge limitation if it isn't... ---
**Author:** ![bobby.miller](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bobby.miller/32/85153_2.png) [@bobby.miller](https://forum.inductiveautomation.com/u/bobby.miller)\ **Post date:** [August 24, 2026, 1:22pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/2 "2026-08-24T13:22:49Z")
Set the left dock's **Display** property to `auto` and configure its **Auto Breakpoint**. It will be visible above that width and hidden below it. However, `auto` only handles a minimum-width threshold, so it cannot by itself make one dock appear only below the breakpoint while another appears above it. For the complete left-to-bottom swap, use the viewport width (`page.props.dimensions.viewport.width`) to open/close the two docks, or use a property change/transform to call `system.perspective.openDock` and `closeDock`. Give each dock a Dock ID so the script can target them reliably. The docked-view documentation also notes that an auto-hidden dock remains available on demand. ---
**Author:** ![MG3](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mg3/32/84125_2.png) [@MG3](https://forum.inductiveautomation.com/u/MG3)\ **Post date:** [August 24, 2026, 1:29pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/3 "2026-08-24T13:29:08Z")
> [@bobby.miller](#): > > ck's **Display** property to I have done this before, but honestly my main thing is it's really annoying having to add a script to each view you create that listens to any change in viewport width. It'd be fine if there was an easy way to add a change script to it in the session props but there is not 😕 . Is this the only real way to do this as I don't mind using scripting to do it but I was hoping for a robust solution that doesn't rely on someone having to use a template view / risk the view not being considered with this scripting... ---
**Author:** ![bobby.miller](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bobby.miller/32/85153_2.png) [@bobby.miller](https://forum.inductiveautomation.com/u/bobby.miller)\ **Post date:** [August 24, 2026, 1:46pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/4 "2026-08-24T13:46:40Z")
I think so. Sorry dude! ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [August 24, 2026, 1:56pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/5 "2026-08-24T13:56:17Z")
You have docks. Put the listeners in the dock views, not the main view. Consider having the listener in a dock view only manipulate itself, so you can substitute docks on pages as needed, and only the docks that are attached are affected. ---
**Author:** ![MG3](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mg3/32/84125_2.png) [@MG3](https://forum.inductiveautomation.com/u/MG3)\ **Post date:** [August 24, 2026, 1:58pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/6 "2026-08-24T13:58:04Z")
Does that work, I remember doing this before and thought there where issues with it? I'll give it a go though! ---
**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:** [August 24, 2026, 9:59pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/7 "2026-08-24T21:59:08Z")
> [@bobby.miller](#): > > For the complete left-to-bottom swap, use the viewport width (`page.props.dimensions.viewport.width`) to open/close the two docks, or use a property change/transform to call `system.perspective.openDock` and `closeDock` I think the biggest issue with this is that it might fail when you change page, not 100% certain of this, but I've definitely run into issues resizing docks and having them revert size on page change... Very annoying ---
**Author:** ![MG3](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mg3/32/84125_2.png) [@MG3](https://forum.inductiveautomation.com/u/MG3)\ **Post date:** [August 25, 2026, 11:37am UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/8 "2026-08-25T11:37:07Z")
> [@nminchin](#): > > I've definitely run into issues resizing docks and having them revert size on page change... Very annoying See I have definitely tried this exact approach in the past and recall there being some form of issue that lead me to not using it. I have a feeling that this was it. ---
**Author:** ![Nol](https://avatars.discourse-cdn.com/v4/letter/n/8e8cbc/32.png) [@Nol](https://forum.inductiveautomation.com/u/Nol)\ **Post date:** [August 25, 2026, 2:00pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/9 "2026-08-25T14:00:24Z")
I remember I ran into some issues related to the alterDock function when it was set to onDemand and I had multiple docks mounted to one side [(here)](https://forum.inductiveautomation.com/t/bug-system-perspective-alterdock-doesnt-work-correctly-if-more-than-1-dock-is-defined/112235) No idea if 8.3 has fixed it yet ---
**Author:** ![code\_skin](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@code\_skin](https://forum.inductiveautomation.com/u/code_skin)\ **Post date:** [August 25, 2026, 2:43pm UTC](https://forum.inductiveautomation.com/t/mobile-friendly-navigation-bars/116873/10 "2026-08-25T14:43:27Z")
I believe this was addressed in 8.3.3. > [@\[IGN-6743\] system.perspective.alterDock can only resize one dock at a time?](https://forum.inductiveautomation.com/t/ign-6743-system-perspective-alterdock-can-only-resize-one-dock-at-a-time/65306/29): > > Hey everyone, this issue has been resolved and you will now be able to modify multiple docks using system.perspective.alterDock without the last changes being reverted in 8.3.3. Change log: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a3d888749b0f75da9481af1ea8cd855f4b60b5f.png)