Breadcrumb links are provided by the Zendesk {{breadcrumbs}} helper, but changes are possible using HTML and CSS.
Standard breadcrumbs
View code b8263d4fd235e447094a82fa944f8696daee6d83a701ac7e25cc556963d53dd4cb5baca0c3fe8406bf49c79fc8ef2e44049efb59d49bf9c293c3fd73f0847204bbfe9cfd0478815e0ae8ec1d7eae142618b96ca10314ab46a481072fff6d35c0a4eee9064888e72a220d5534b53b80148a84e190eeab666947b43b66f8df678ee5865ccb079b6cc25374d36f38488dc69a57f7fcf0fd84720f0e6978613cce685727e89dbc2ca138b3edd6775126df00dea66029b2ee0772686eca08592c5344
Wrapping the breadcrumbs markup in a container with utilities can change its appearance:
Breadcrumbs in pill-style container
View code edee3adbddfb5dedabb239dca55006b78f68b8a67f188ba40e08b331c5c1432fd61dc899dda69c44efd1bc537a38d3dbe95c1caa33dacbcd4f1701589c9c79117fd40a60d2b8f011be2c03e44e3a7a111a6aa1e0980620fd817ac4a1f42ed95ca7f7eb17871e4e67516abbc22d14f9b2f3bb321b1d988f931df2eb245c24e24abf9c32160623e81b47ca7c4b29ea13b7794d315e3214ae015885b8d72c60cf75ab7f83d2983fc064c84b051cba4a67f0e9a2c87187a634cfecd7ba18d98bc87864717570c3d57e2f5db4c664a5d7aac6ae775f86e6ebcb7bdb10c60778a77b54e55e03384287090157f25abc43bdb328811f8c3beb7a0644553949092f94de55394156a50ed9100eec58c3dd30028cb32fb8a37046af6541a8b174fb2441d60297b622ddc4c46db92bee05c24025f1a01c8b6f971c69f256b80c87e5b063e99a356ac3d60efcbe88d20178b2718851ebd7a20196c4408d37edebba0614c393c23c80fc7e9eed038e763e66f2448f1ca8e23c5e04de2887f3f987f02e1c7e4dcdbdf8678f226051e95008e18f3320d11de3ecb07ed3905749f4943fbfbaf26378
A little custom CSS can be used to change the appearance of the links.
Breadcrumbs in pill-style container
View code 5bf78204135edf629bf905970e4995b2122e3d1834e3ee45465c34ebfba65f5f556f29d06ffa8faf27b32516f32f9382578e0058f878db4e26bfd737cce1096ab74fdb8ba8aeb559af0461afc76e9b47f21078008c07c9dd31b95c99131e0f4a36bd1c70fcc7971ddf51a86d97c1551227df265b2115abfd84185ec650ad7c9ee41d259800fb298123b2054714dbf7a5509fc5caf0f245e2076a2c2ab0c27ad61c916c09a8a3d806c70333ea62fc17ab2a4bbf6525b82c2c9c1151b17286bd50cd5eb81b31708bbd3998d12d33f6e605b5cbac45c678d5b6e4dfa5ba6c2b09803ffa3c8f7078bb2ecee29c28a5c44a1ea76ecbda92b7d1913f7728e112e387b22222f1eb7e76f62a983caeabf1af6abae9a7c6ecfc518e1f886549c941b05f27c701b27b736ca869d2f242510f27a95388d03eb137c99779e575d4b73368392a42cacfc46d1f097299338d553a67edd0796aef10e85c3a2ec4895b2d9b637f8bb477297db5191b25c5ca36b5978dc5e9f6087a560449c9b73296484b07f6353c36f5c1af1ecc0701a3b132ffcac9c6747a558a1e5c1553b7edf28613076343f49541b37c20ba5b7b80d83a942347d172f3c4ad7c9cf209231fd2358ba46cffaf477691a7ed7dc124e4293dbc7ec9c427c7b3c29361185718860c4c8914da5a82f7fed7eab255c9418bd9d088ff3ecc38fb71831c9c346f2b95069eabce343bbbe625a990c1da024f20d4600c072f31de61024178e9d76b821a307f2cbcf96c3a56e4c2bbbb28e6ee87570453d7360f86925a3ec4ecbf9a7d76696f59ab8c701d3d52a70dfbc0ba9f9198df077a3a192947b476ac6c61ffa629067fcb095624269dc956265c1ba4db6385a027293d19aefdeae3216730f7da1ebdc538d0655064ffc1b72b8387e3a49161fba4656b33f445f9f799823a633632550142a495d4f87b71cd598c3ebdf003507f05bd5f2649f39a2bf64de4f44e65aef8ceb13e6a0648d078e42488200be9717bfa87aa49c5ed43db927f1e75550cf80d5cf9ce1048e0b8a5fbd0d4f09e25bcb2151ca96ca9b8648ff95282b0c2cc979e8af7d5f98b5430f294c1febbcaf08fe4aaacaa620c7231b2aea2379f68e30756e75e94f5da1aaa3c18cafa270b8275a71ed6b0f2ad92fee98ddb3da51c8b236ec1c6ba6eb65a408243acc9d5281a9de370113449fca6505ee47f0b55153e175918b2be74cbe65e3aa42aecb9e5542aca7af3a1fabe7ed551886b82edba484970d5c4cbdf3282b799cb2ce943497e737f05c7de104ecbe38d8e15a2860a13f0bfc0e7f5370b6dfb35a655b75f0c8a724bbf9533bbe2ddc15cff4ff8ab635034b85ef178eec6732a0532af319c2aba18171c645dc80308615e727f718269ca4e28cc8987f096848b8e82f2e5dfe8ed9d637d43eb2242c0afc6b28ab9bd4ed2c5fdc27593da711518e04d500d897ce901660f29a5d74d012ce449f67bb3f7b077307399b2d7100e66d04561bcf5766e0548ca9f3e4b73aac3da4c8f55cda9b19fc9a6f9fa241a52aee074c41aae16001f66a65062c2fa
The article, post, contribution and search_result objects all have a path_steps array describing the path to the object. More complex patterns are possible using these path_step objects:
Breadcrumbs built using path steps
View code 8d25567fcc5a9735f8ec8f13071d3d5b333f29f49910c7294a7ddad3ff0ca3e16e45f91b16cacc26b591ee47cefaf2e704a74e389c9bc2e7bdf5b373aa83d58ba08ee63759aeb3208d926690db918e80453a5f5ad2cdf8ac94de686a780292b3ab75d41b90cead4d4d462b4b6f55cc53b60e86f1ccfb39c698284f07ec7a52947c20d347082f2714cbda23703496fff86785616b8cccfe2b481be335b461b793480a949128dc2b07a7bbbd1cef0105aa3e051cb321f84b599e37aba493d95b4af5d4832fe2f492b23ff27ea9669c09069ff2cee0dce14ed4c8c2b9819a6fe9da5e93c4b3916cc4ba765a7e95f63e04846f9d47ee83de15c55fccb3f07072a8d947e991674b04cb82e18c7211e54fb2bb4ccd50c10a63ced391ca21cf8e192a8f4e9cf23bcaa3741570ccbdc35c852c3a13bdc194a9393d677cad5d5003f5a03abf825db375fe1b62257e081a7f6dd6b836675f55c39448124999ad989dca370a9fe7d6f090fb52a6b1ab7bc476c691bb534fe5da68392c68aafc9acecb6573f28e17045ae8b74f7fcaedfa0a8c623e5a15ff9078eb3fc1030f6c1c4a8f23b364735f15cf6a3cac29301816d64269fda9b77ed36630b8af69e867987ecdae19718f320e92c491c6e70a53196b9cd3307021f712ab471f67125ebee5d6308313bdd2f096dc793d1e7b756d6e25e348f80d3d334c30d418cc1fe5d7b52c16aae402c816a279af165ef14a6c065a57ba9e57cfe6e4f81564c28c1720de244e2dd1c63622a94278d8bd00f1b2c299868c967c59dbc99ae39f400305f2bc81c934eadea8c533aeb43022454dd216bf37ac734350494fabcd25b132cef70ded5adcefdc6142a848c0a0104d1212043e7dc9e3013d1d4ea9f2d279995808053e29e972f0dc474e841dff106917db867d90ec41812d8d509d45d4a56e010c944a1d72406a70c40c6838552df48eedac9c8b66c96850d95d87d12d44460303eaee746b3cadaaf67a958ad2d1979a24e3d01d5b4e31898e11b554aeca8ed679c5e5a4ab38e6c6902e728e3055f9525ace4997c2da8e7d8bbcbbd8d972d2813a6805a52621e5fb08920ecdebfb2d69dcb3a148c5cc0efa5fa4d213863d4b86f7055f29f203ada407040b5ee9530f2e8eaf53110a1676080fa237f3de010a046ea596d475ded91bae08447cb083b683b336a623a4654e4513d371b3282a05f5803863fe74da56989cad28321886caaf5217092a60bf0354f34da815399c84811d3a31f06c5f7f03c001ba72c41ad9422f3621c57be87d2e6875cea394235810c3a68b678c4d93792de91ccc56aef2bdb377aa66e6ee475f52cc2c4c4215bae6ed5009e23542b645fe2f35320cfbf750a6b3ebf42d32f41269867f2e82886690927bf770fbcb1e74fcf2a2f90f1f1c47f57c7e866d75c870129a404709c8f66081b3ecbf72c060ccdba1064abb6fd3eda7cc2b7aee69a525d7f973f1c2b3ce3f8a6e1b9677c3e8fc46698ec54c5eddf2f57e5d27efb0b2b2f35beb1ceddab43ef189f0577c268425bb322e321ab9557288e0e28146a64bf31fc16a3a41e28beeb647460eee9d629d035823929be44207f9e6e6c2a8213ffad58a97d314f6ff90240c4fe0d2e12285364c4b435d526ea58060813fbfa04f5cf89b008a69d2c83ca40f92c84d36fd9e963240ff2f9e9b3102a0b29956936fc60c382b7ff2909002bf8d7364c43cecb855146858746093508572ff976b071c4bda8d8f7e6a66c7e38bf724a74757504b01055b749d3c60223e51c41752c94eb15164f9ba3744323715dc49e743b289d362e840cfbe2ea1c9b2b13437ce25114c4ab01c276ba4bec5e5ffd2551f3efe99d467bdbd6d805852e845a8c1d353ca2d72d6afee1f3eb44b4df6105a0ac00a1a87f834097e5fef054c13523425827faac2cde9f6e5e3aa1dbb070ce71491575cc8efaa3db353e567a517a92240955096a515b26044e7e94819ec4e4457f6a9e30fcc91d7a37546f24d9e9f9c2e71a23836795c749fa56da6729ecf911713d564157baf514c19db224664877e32f7f9449920fd390301adf72b9ae23c7e8d9e8170cbde135fe6aecec54f332da0126fc3fa67a686564e0914246b63019a03cabfce753d203fae165266ced99b67d6b0
The same approach can be used to present a single path step to create a Back button:
Breadcrumbs as a back button
View code 324787771b4ceeb46e26aa2faf3fa8a24cd2b2ca5f0aaaba435d1d142efb9bc146e66b106add50c27884adc072c69c4154a7594550c9f474c91e501761c616b18635c781be8a54c8a0e1bc340502001d2f77e8e48b0eb8da520a4f24b0533de02bc987788708f73b086757d0b6f5a9fae0416f0c5e75041b6936cc005215c57de4297ab20f1f74c969582afcbad733312c68ae7fd46121691f6d6c58e68b95e96e3e83069e8b7ede917f382d2c8654cb424a88c66166d109dc2d25a5a78bbe0f61a1eea24d0172e8f960876488593257ec54d42bcbd8ba94452b53e888a60db4864f94efd56a0754434b127f35ceed8d678341c8948db53509b20c7d873f133044df9842c7e5cc9d8e793aa4d744c71418014c144f37399ed54848abc49a3ca3ef18f8796f93716084f9a59c4e33ce3e87a7834e26b64d6f82fbb96e78987efe381318d3223fabca9d89f6e565031c6fadfbc2999ddd0eeb1b3544413aae0c7f6c65ece443dff356fb36f1c163a314048db02840b2a519cc29fb342f241f4c41dc09fef5582f96dca35ce78d7a80e1e7300d7d23c8a889eee66ce53df7f0a44622df26b40b140a3d94b8b3292e07ed45c4b0789ca58bc6f8dc290b52a48e953c08a20e2a2a8ec32b1cea9c4ae435c0f5ea0138920cd059c6957a02bddb95f0d32fb16d05641eced04b65f087fc8af64e8c0cac53674d2332e05d484bd6b1348545ba10372bac83e7e9d5ea6832a101d6de5561e9342a8067c4737681e4d8c7d9211ea7dcda9244aedf1093058f23bab026ca620b000686bfeb5220608386b26c5c2c2f9f21962181ffda2717e34856ae5960062f614d6219d8fac3570ea96bb472095a8227d72ae75a97ab6fe10a92bdbd79ea41ce71b83d726019ddb2b72149b757b8e64070a0469ec6ccf5c4758613e86729902f15ba5a31b18d78c63b0be8cb6d0f63ea24fb166f3588c123fc57a15c5f4888fce20c72d8e9718ce52420c18ac321477c92f5c2f8cbacecdee6a13bd1afe81d804f7890715cfb265a95a704cc25e46f065ddf1db9944bc4ce6ea2e01eb9539b56349baabff6e0ae64e2f32327c4edc09e592bfe872ea804275a435468daa9d5637a335c7a42525807af0983a86943729ec71f89781505c3fec1aac7ad6fb040ef94d981d4b7764de7d68d1ceb1c35bb5160b1c3c73c58b54d4f037c
Or to make long breadcrumb links automatically truncate on smaller screen sizes:
Breadcrumb links that truncate when necessary
View code a76a30c6720be1a32f4f4b26639f389568371db78c9bcdd99b8dddc27ece43ea54d8366daf426dbe54621f2d3f98d889c5e39bc8eb0b075f7a125b7ed169b60b0e77df62ea37c413f4d76f111068a56bb47d91e920717a97fa093d72476ded856fce9c5bf48cba706021f81a2eec77c09177244f79b631962596e60fd784ce01dcb227df2247a91f362e725ff5df410118936acb0000441ba36b864ad39276fca7f8559bbbea8d0b42455f861b178aa8198b912c6dcaa1e3cfbada8dee1d4b3e4449694f064c024c8197f4ac4d11906d1c913a623c92f1a3b03e580910366df5844e722fddd53747f245dd8e84eab651feba3fee37d7dcd6a4c46d12a8759960f164eb37d2d5c38d8f9b3b65766876b9dfbdd48732726ea1f16cf14445da86496ae09d499618a46f4845f712503228b76adf28690cf35f2680abab572d595d45c4e2a2362984ce5661bba224a027994ad745caee3e26d00ab476eec0c0a45a937bfb0841b5f49dccd9b1ab4b02d83bfc035ee693039cace51ba113ab7cf606c69a283d032b430f33b7ba7818c4487ce481c2927ebb49b2b5cbef05bafbee7fb63e9e2854bb2975177d8e3a79bee2561ef92f27c01d1ad4026457236171c6d7ee92eb3e0292529e1e22cbe9dd1155e2a96534e15b3da9cb2176d075a9f9e1deeae098ee974e55c99cd4a7262a66ef819e56df2ccfa0391f7978f17e2a8f2b1297eb135c3dff77ba048882b7423c1a4363001b3a71538a1c0774d7559d7aa57cd7fac26288e6167b751bc663a42f9240b4a5146b2aeacadc949cbdaf104ad77b7b0cd933f9f2e228c0513fa696b2bb70094586d8cc2a66aca98b8cbdc39f9de299e1c67ce90281be3e8cefe40e84682d3497d66bb2a662576a9bc8e9862a0d58bb8744fb85bb54b14cef6a6d0c8dc5863adb52e7d90c396f8d9c7c92d42582245f8f695f8ac515a0c2e12a29a91f7adea6c4779269248cf1a6dc50d73eaecfbf78be2e2aef9756569f25881403c57770dd458396b0372f548058d658cd32da325aa3e5d6917b457508b72f74cbae6961aa1a319dff54a2cb90e9290d391b5d1a6b5c4e82339fc9c37bc8e15f910f2041962a244b02115636b93063563aaa9a4f9dd03ee8a7ab21a0c0986608226d1efe1e1e6e3c9c4a59918c6ae16e8350d1dbcb5587ae65aaf972c75341f60bd8b9fae35b45a064b0e9ea76677d6d0e5e57cf79ad9dc2e14271b6e50249d6e5b941404222f4ea74ea48aa606064acd35001d846d868d1230b27e7177bc38b218ee196b660acd2ed9ef5dfcb094ef867348a67a51d81de12eaa1dfc08209a8a45241e88f545c1615caa519a635808d22b731c5540e1c7dbee450d4e821ce2077c17a57ec46d6210544d8aad9d109ccdf80bbaaa0819b1308aed11bc626054e8fba945a269964336084d9963d07aaf7a6470bf52b56a0088e5943eea18854fa3949b67620b3d0f15953c8831d51a5b86474d5c33c880eb2a64365939505cb41119fe857fd2a0828c6f67a54f030426baacb33f1257f394ea9ce1c53f58e3ee5051ac801edcf3572d78815dc98ef0763e57717acba0dcd858ca68c8b6da6c9d1b3eaabd41852352f4cab06cb12186aec2a8f8970ab80f3383af33037f0394e2e2d6c37720e41bfa6dc372aad54a2b8cffb19957d9b57d38b3823ff77d04824ca35f93fe532f1e835747f8a14ba97558c8c6f177c2178d376f8a52eb23c1b0fba599aedd996790f3e83e5dae3e088ab2b3f3b10e3d23a4cd47d3ff825a0c3ad98f24c61d2fa2bbae1d94f208278ed8346ca84bf378b184cb935c5f0b92b6467497bc1f534c920f10d0edc5676c9ccf83bffb7cab3dca3267cf393a9367f4e39ca0465864e636e8b91c1b013388ab2187f97a068d0fc0ec3c3aa3b4f079dbc83b384303531bb564b2518c63fe43ded40db684616385354d1c9a143c35a68621ac2cae0abfa4f0618119005ab823b5470491ab24d3ad054b8c5954faceea95f4684742e62ccc7c292f1acb242fa84981648089bb3f94d18fce16020e858ec698e88ca6c507612508be29e6a5da33a493f38fd7def2df40130c5eabbdf99b2a97ad1ab11b108bcbe724166a6e4e347d3eaf1edcc6bab37c3bcdbcee58f0c1eb1b1bfd7f0fa3db7ebcafbd008b5e926e6c36903edc28d6eedc1bd7c6294912f5049315780b5abc798a1102341b3092ed419a4835d149a9fb294c990e3163fc34b77e35b70c766e178e80f319e7b7c8b9d2cb85ad914f0a47ce78e83abf365c6ec93fb4e10301b25dab7fa632046f3dcb158c72deed3b9ab8a68c1953455d11780d8dd9b57bba1dabfe2c1de398bd1c0cd05608ec407951b
The HTML for breadcrumbs is provided by the Zendesk {{breadcrumbs}} helper and cannot be modified directly.
You can use breadcrumbs patterns by copying and pasting the code into the position you’d like them to appear on any page that supports the helper:
- Article page
- Category page
- Contributions page
- Request page
- Request List page
- Search Results page
- Section page
- Following page
- New Community Post page
- Community Post page
- Community Topic List page
- Community Topic page
- Community Post List page
Customizing helper output
Despite the breadcrumb HTML being generated by Zendesk, it is possible to customize the appearance of the element in several ways:
-
Update one or more of the Sass variables described below and recompiling the theme stylesheet.
-
Add your own custom CSS in the theme’s
style.cssfile targeting the.breadcrumbselement. -
Use HTML elements and utilities to wrap the
.breadcrumbselement, as some of our patterns do. -
Generate your own markup using the array of
path_stepsobjects, where available.The
article,post,contributionandsearch_resultobjects all have apath_stepsarray describing the path to the object. You can use these to generate your own custom HTML and thereby create an entirely custom look-and-feel without affecting instances of breadcrumbs elsewhere in the help center generated with the{{breadcrumbs}}helper.
For a complete list of available Sass variables, please refer to the breadcrumbs element page.
