Scrollable Navigation

I am wanting to create a scrollable navigation menu. So that I can add more dashboard navigation tiles without the whole page scrolling. E.g. I want the navigation to scroll but the rest of the page not to.
I began creating a custom tile with self made tiles in it that could scroll but then realized that I cant actually navigate from within a custom tile as it’s an iframe and any navigation just occurs within that iframe.
Wondered if I could trigger something from within the custom tile that would maybe trigger a rule or something that in turn would cause a navigation to occur but again came up against a brick wall.
Am I missing something or is there no way to do this?

In the image my nav is the black tiles on the right.


What about this? Just saw it mentioned here the other day.

Seems to work

window.parent.postMessage({action:'navigate', route: { path: '/dashboard/view/xxxxxx}}, "*")

That looks perfect Thanks Chris. I’ll try it later

ok so that works thanks. Only problem is that I need to access the custom tile’s (iframes) parent url so that I can figure out which dashboard is loaded and style the selected navigation item accordingly. But because the iframe doamin is and the dashboard is I get a CORS error e.g.

Found a simple solutions … kind of. I just add a setting to the custom tile that specifies the selected tile for that page. on each page I just set that setting to the id of the dashboard and set the selected tile to the relevant html element.

1 Like