# Breadcrumb Navigation **URL:** \ **Category:** Ignition\ **Created:** [February 24, 2017, 11:58pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721 "2017-02-24T23:58:12Z")\ **Posts on this page:** 8\ **Page:** 1
**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 24, 2017, 11:58pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/1 "2017-02-24T23:58:12Z")
Hi all, I’m looking for the best way to implement a breadcrumb navigational object within Ignition. The most obvious to me seems simple enough and would involve concatenating a bunch of strings together with navigation page separators (e.g. ‘\>’), all formatted using HTML styles, and having each navigation page clickable using inline HTML formatting. E.g. Home \> Fermentation \> Tank Details Using this approach however, I would need to incorporate functions into the HTML string to provide inline clickable links to navigate to other windows. Is this possible in Ignition? Otherwise, another solution might be to have a number of button objects overlayed on top of each navigation page text, but these buttons would need to dynamically size and position themselves over each bit of text, which is easier said than done… this would involve calculating the width of each page text string in pixels and then moving and resizing accordingly. I’m not sure how to do this though, as it would need to be calculated per font, per font size, per letter. Maybe I’m over-complicating the matter… Any help would be appreciated! Cheers, Nick ---
**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:** [February 25, 2017, 12:18am UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/2 "2017-02-25T00:18:05Z")
Hmmm. Sounds like a good idea. A good idea for a custom module… ---
**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\ **Post date:** [February 27, 2017, 2:39pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/3 "2017-02-27T14:39:43Z")
I would think this would be possible using a Template and Template repeater. If your window structure is already hierarchical you could split the path based upon the current window client tag and build the breadcrumb template using the resulting paths. If I get some time this week I’ll try to take a stab at it. ---
**Author:** ![AlThePal](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/althepal/32/3603_2.png) [@AlThePal](https://forum.inductiveautomation.com/u/AlThePal)\ **Post date:** [February 27, 2017, 10:44pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/4 "2017-02-27T22:44:30Z")
Nick, I’ve attached a project implementing this using a template canvas. I couldn’t use the template repeater as then you would end up with unsightly gaps between the words. Having done this, I would say that sizing etc. is rather manual. You have to create a custom dataset for the template canvas on every page you use it. This works, but I would be tempted to make a template for an entry and then place as many of them you need manually on each page. That approach at least lets you drag their positioning graphically. An alternative would be to write a function that creates the canvas dataset when you open the window, freeing you up from calculating sizes and positioning manually. Ryan, I don’t think you can parse the path, as you wouldn’t really want folder names in the path, only a hierarchy of windows. [DataCapture\_breadcrumb.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/ef0f58d6a264e7cd32981a09e53b38ef8c4e6a8c.proj) (32.4 KB) ---
**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 1, 2017, 12:47pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/5 "2017-03-01T12:47:24Z")
Hi all, Thanks for the replies. It seems odd that a component hasn’t been developed for this already. I actually got the idea from the latest video in the Design Like a Pro series ‘Building Better HMI Navigation Schemes’ where they talked about using them. I see that there is an idea posted for this a while ago that was planned to be implemented in v7.8, I don’t think it made it though as its status is still ‘Planned’. I’d rather not have to mess around with using a template canvas and customise it on each page ![:/](https://us1.discourse-cdn.com/inductiveautomation/original/1X/8e510869ae26fbd7ab76e1e731ceea2054ef109c.gif "Hrm") ---
**Author:** ![jorgegonzalez](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jorgegonzalez](https://forum.inductiveautomation.com/u/jorgegonzalez)\ **Post date:** [May 27, 2018, 9:01pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/6 "2018-05-27T21:01:09Z")
Hi AlThePal, firstly I can tell you than sorry for my english, I’m from Colombia and I’m fan of Ignition, actually I’m making a Ignition project and I would like to can implement the breadcrumb navigation inside it. I found out this forum and I can see than you attached a project implementing this using a template canvas, I trayed to download but a couldn’t, can you send it to me to ma email? [jorge85gonzalez@gmail.com](mailto:jorge85gonzalez@gmail.com) best regard and thank you so much. Jorge G ---
**Author:** ![AlThePal](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/althepal/32/3603_2.png) [@AlThePal](https://forum.inductiveautomation.com/u/AlThePal)\ **Post date:** [May 29, 2018, 8:09pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/7 "2018-05-29T20:09:39Z")
Hi Jorge, I couldn’t find a copy of the original project, but I created another one using a slightly different approach. This one uses a DataSet tag to hold the current position in the ‘tree’. You can create the tag using a button on the `Main` window. Normally this would be a Client tag but you can only create SQLTags in code. I implemented the breadcrumbs using 2 different methods: a template repeater and a more ‘manual’ approach. The template repeater works but I think it flickers too much when it updates. Let me know if you have any questions. [DataCapture\_breadcrumbs.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/529ab7bf20ee9da695df5fb4d3a819a6207af1a5.proj) (54.9 KB) ---
**Author:** ![Kyle\_Chase](https://avatars.discourse-cdn.com/v4/letter/k/9de0a6/32.png) [@Kyle\_Chase](https://forum.inductiveautomation.com/u/Kyle_Chase)\ **Post date:** [May 29, 2018, 8:23pm UTC](https://forum.inductiveautomation.com/t/breadcrumb-navigation/12721/8 "2018-05-29T20:23:37Z")
You just have to remove the loading panel from the template repeater, then, not flickering.