I have many pages in my header which can make it unclear to my users which page they are on. This code/snippet is available on Unlock Softr but I can’t create an account right now because they have an error there.
Can anyone help me?
Hello, here’s the code.
On the page you need the block, add a custom block code with the following code:
<style> /* Style the list */ ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #fae1b1; } /* Display list items side by side */ ul.breadcrumb li { display: inline; font-size: 18px; } /* Add a slash symbol (/) before/behind each list item */ ul.breadcrumb li+li:before { padding: 8px; color: #13324b; content: "/\00a0"; } /* Add a color to all links inside the list */ ul.breadcrumb li a { color: #13324b; text-decoration: none; } /* Add a color on mouse-over */ ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; } </style> <ul class="breadcrumb"> <li><a href="https://unlock.softr.app">unlock softr</a></li> <li><a href="https://unlock.softr.app/tips">tips library</a></li> <li id="lastcrumb"></li> </ul>
On the page where the custom code block is implemented, add the following snippet to the custom code footer:
<script> document.getElementById("lastcrumb").innerText = document.title; </script>
For the block to be dynamic, you need to have set the SEO:Title field in airtable as per softr documentation.
2 Likes