# Perspective Navigation

**URL:** <https://forum.inductiveautomation.com/t/perspective-navigation/42911>\
**Category:** Ignition\
**Created:** [February 2, 2021, 8:11pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911 "2021-02-02T20:11:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael.black](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@michael.black](https://forum.inductiveautomation.com/u/michael.black)\
**Post date:** [February 2, 2021, 8:11pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911/1 "2021-02-02T20:11:40Z")

</div>

I have a header with five navigation buttons on it. When the screen width is shrunk down the buttons will not fit the way they are. Is there some soft of other object like a dropdown menu that will allow me to take those 5 buttons and replace them with a small symbol and when you press that it will drop down and you can pick one of those five from the dropdown instead of the buttons?

---

<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:** [February 2, 2021, 8:20pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911/2 "2021-02-02T20:20:22Z")

</div>

Not sure about the drop down part off the top of my head, but you would need to use a breakpoint container to do the container swapping between small and larger width versions of the nav

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 2, 2021, 8:53pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911/3 "2021-02-02T20:53:48Z")

</div>

You could always place an icon, then configure an onClick event to open a Popup which uses relative positioning.  
 ![Screen Shot 2021-02-02 at 12.53.27PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/3/e3d286fedeed380657957f92a11ebc7f93145cc7.png)  
Then you just need to put your nav options into the View that you select to be the Popup.

---

<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:** [February 2, 2021, 11:05pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911/4 "2021-02-02T23:05:19Z")

</div>

Extending this, I assume there’s currently no way to resize the popup dynamically with the height of the nav menu? Say for instance you have an accordion or menu component that expands, can we make the height of the popup expand as well? Or is this something some fancy CSS could do? (if so, any hints?)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 2, 2021, 11:32pm UTC](https://forum.inductiveautomation.com/t/perspective-navigation/42911/5 "2021-02-02T23:32:54Z")

</div>

There’s no way to change the size of the Popup _after_ you’ve opened it. I know Nader tried something like this once but the best we could point him toward was to open a new Popup at the same location with the new dimensions and close the old one. This approach will NOT work for relative position popups.

If you were using a Flex container in column mode you could possibly have an accordion between components which has `display` set to `false` until you need it, and a `basis` of “auto”. Then have the icon’s click event negate that display property ~~Not the best approach though.~~ Actually, it didn’t turn out too bad…  
[HIddenNavigation.mov.zip](https://forum.inductiveautomation.com/uploads/short-url/g4fVTsrIaTgjAgWIf13wXuIH0QF.zip) (963.0 KB)  
onClick Event of Icon:

```auto
self.getSibling('Accordion').position.display = not self.getSibling('Accordion').position.display

```

Or you could do the exact same thing with a Dropdown. I would recommend a change script on the Dropdown’s value however:

```auto
# this would hide the dropdown whenever you make a selection
if currentValue.value != previousValue.value:
    self.position.display = False

```