You are here

Breadcrumbs: Not for the birds.

Submitted by Kady on June 23, 2015 - 9:44am

In the vast world of the internet, it's easy to lose your way. One way to help your users stay grounded is to use breadcrumbs.

Breadcrumbs are a method of navigation that shows a user where they are on your site.

In NationBuilder, the breadcrumbs.html file controls the navigation within the site pages. It typically follows this format: page / subpage / sub-subpage. With the Buildy breadcrumbs.html, all of those page links are clickable - making site back-navigation more simple and intuitive.

Having site breadcrumbs is a good design practice, and is helpful for SEO.

Most of the popular platforms for website development have methods for implementing breadcrumbs. Resource links follow. Make sure you scroll past them to see a code snippet of our implementation of breadcrumbs in NationBuilder.

  • An in-depth look at breadcrumbs in general use.
  • Breadcrumbs in WordPress
  • Breadcrumbs in Foundation
  • A study on the psychology of breadcrumbs on the internet (Seriously fascinating- or maybe that's just me)
  • A comparison of Drupal breadcrumb modules
  • Below is a code snippet from Richir Outreach's NationBuilder theme Buildy.

    1. <!-- @START _breadcrumbs.html -->
    2. {% if page.level > 0 %}
    3. 	{% assign home = page.parent %}
    4. {% else %}  
    5. 	{% assign home = page %}
    6. {% endif %}
    7.  
    8. {% if home.has_subnav? and page.is_nav? %}
    9. 	<div class="tablet-visible mobile-visible">
    10. 		<div id="page-nav" class="page-nav">
    11. 			<ul class="breadcrumbs">
    12. 				<li><a href="/">Home</a></li>
    13.  
    14. 				{% for ancestor in page.ancestors %}
    15. 					{% if ancestor.is_homepage? == false %}
    16. 						<li><a href="{{ ancestor.url }}">{{ ancestor.name }}</a></li>
    17. 					{% endif %}
    18. 				{% endfor %}
    19. 			</ul>
    20. 		</div>
    21. 	</div>
    22.  
    23. 	<div class="desktop-visible">
    24. 		<div class="subnav-container clearfix" id="subnav-container" role="navigation">
    25. 			<dl id="sub-nav" class="sub-nav desktop-nav">
    26. 				<dd class="{% if page.id == home.id %}active{% endif %}">
    27. 					<a href="{{ home.url }}">{{ home.name }}</a>
    28. 				</dd>
    29.  
    30. 				{% for child in home.nav_children %}
    31. 					{% if child.leaf? or child.nav_children.size == 0 %}
    32. 						<dd class="{% if child.is_or_is_ancestor_of_current_page? %}active{% endif %} drop">
    33. 							<a href="{{ child.url }}">{{ child.name }}</a>
    34. 						</dd>
    35. 					{% else %}
    36. 						<dd class="{% if child.is_or_is_ancestor_of_current_page? %}active{% endif %} drop">
    37. 							<a href="{{ child.url }}">{{ child.name }} <i class="icon-angle-down"></i></a>
    38.  
    39. 							<dl class="sub-nav">
    40. 								{% for child2 in child.nav_children %}
    41. 									<dd><a href="{{ child2.url }}">{{ child2.name }}</a></li>
    42. 								{% endfor %}
    43. 							</dl>
    44. 						</dd>
    45. 					{% endif %}
    46. 				{% endfor %}
    47. 			</ul>
    48. 		</div>
    49. 	</div>
    50. {% elsif page.has_parent? %}
    51. 	<div id="page-nav" class="page-nav">
    52. 		<ul class="breadcrumbs">
    53. 			<li><a href="/">Home</a></li>
    54.  
    55. 			{% for ancestor in page.ancestors %}
    56. 				{% if ancestor.is_homepage? == false %}
    57. 					<li><a href="{{ ancestor.url }}">{{ ancestor.name }}</a></li>
    58. 				{% endif %}
    59. 			{% endfor %}
    60. 		</ul>
    61. 	</div>
    62.  
    63. 	{% if page.has_subnav? %}
    64. 		<div class="subnav-container">
    65. 			<dl class="sub-nav">
    66. 				{% for child in page.nav_children %}
    67. 					{% if child.leaf? or child.nav_children.size == 0 %}				
    68. 						<dd class="{% if child.is_or_is_ancestor_of_current_page? %}active{% else %}nodrop{% endif %}">
    69. 							<a href="{{ child.url }}">{{ child.name }}</a>
    70. 						</dd>
    71. 					{% else %}
    72. 						<dd class="{% if child.is_or_is_ancestor_of_current_page? %}active-drop{% else %}drop{% endif %}">
    73. 							<a href="{{ child.url }}">{{ child.name }} <i class="icon-angle-down"></i></a>
    74.  
    75. 							<dl class="sub-nav">
    76. 								{% for child2 in child.nav_children %}
    77. 									<dd><a href="{{ child2.url }}">{{ child2.name }}</a></dd>
    78. 								{% endfor %}
    79. 							</dl>
    80. 						</dd>
    81. 					{% endif %}
    82. 				{% endfor %}
    83. 			</dl>
    84. 		</div>
    85. 	{% endif %}
    86. {% endif %}
    87. <!-- @END _breadcrumbs.html -->