Breadcrumb links are provided by the Zendesk {{breadcrumbs}} helper, but changes are possible using HTML and CSS.
Standard breadcrumbs
View code 6a659736cb7a0b31a7e176aae22b998ecc41f5c97492990eeea9caac3daade308d4bb690f601dd80221bd3eca1b65e1f288c0152a9872f2c1f92ddf0fcf584fd1cc4b1c25657d2f4d8b840944c10f13a075fdfba8c8de7702402b1a07ed9cce1f5c218be5ad56c5a30933631d86a04b2887967f521196a3cb95469500d6fa30aaaf523d19c2c1e8b7e88177d20dc61dc86ccbdb0eda4b17ce477f577ff3cc531422fcc75737380c4c53f7d679514499c4ffedc164d8b9f2ec890ba16caf23e39
Wrapping the breadcrumbs markup in a container with utilities can change its appearance:
Breadcrumbs in pill-style container
View code 4d798c686b9887bec5b75aea5ce3d3bcfa22ce2583f253514fb7574d9f211fb8cc08ccf8bc3d5640f6a7a4bdbe431a727fb5dc16ba5a56e7aa407d017f7e43ad23e1ae24b1d5df62eec44f9b138ec6d66d046f3cee9e6cbfe9ef650dafc40e425d8246ecd069e43cae95327827bb2ab6fc1334f98b19fe4558f0876451014a73bc874567ec3c16d62e649e73dd0042be12f81233ce964c6156c6be2bd935127682cf0ac02ff4598a5926cd00e20258831b2bc14c93d7753eb7853f269497634ff873e4e2150a3cbaabfb4e3640b6a92d1c327451f0f17df685a988d18c554d3bedaef333502939cb299cfb7ba2c94edba8c92a659fcf34979ad95cdd5428da324c9b52b6e9debf5fd046ace3c5cdaab5b33bc8eceee64cb5593a0f11408cc78874b4d71bd06ab4d90c6f01e379718450ffeb46c2b8efe3f16a5e058cde2fdc04ea194fbfa456166772a45551a85574cbf59ccc56675f182bad8026f20674d213a3790c1a49352aa391b9f6a2fb9565fe42b5920d2f554bd298cd103e09cc9718010a59bef262456bf7a6f0f9d1dc2f3c51dba738b2ac4c01430bf21ef84c2881
A little custom CSS can be used to change the appearance of the links.
Breadcrumbs in pill-style container
View code ec87c979132fa370f1159e1139f803ad05e239ca2db0cdb3bc6cd9dab93eca33a8a9df859781cf9be7ef2b0b7aa9243cfc3bf6d7a64c9ed82ad3a0bed9ff44d42aa8b0dee49354d0755c17b874e2511eebec0476f871a5f6f0cec924de7f85a7ab500cd5da218581b47e5fb805890c823f5c77619c2d37d205da6b4bc14c366eacc36289d872924ec7c390327bed93c6f2f6690199a47f1b61da16c6ede2b41b6a2e3a0b3ddf1cb996374c79071fc40b2bbfa2f8770ec348a0ddde56d4ffa036bf9275c5d0cfa4ed5dece5e9a76d6373d0ad6c3ff3c4af75cd787f33eccec482f989fb4c4247c84638a24ed45adc46e124a282723e2f4af4e8b1b437b452e29c0e70c17eec51e9782fd4caadd8765f753ebcdc067e056fb68086fa8cf48ce1e7ad6a81ff9ee24b78df1361173b566c63ef9247f958fd84365a549a59b43d3b47a1fa3a4c4c1c1795b6e3d302d9405ff655c0747c0e39f78210e3b411334aeae9dde61fb71aa9b9f4b85e78ae78343a8c821cef02d9df3dd51ebfd8fec7a2c4305ea8e7d34456315c62a2b1e0b04dfd67fbb5d04e57ff2c845eeecab4dca9d965d32a7eca1711e45b34fd7c74ecc4566dddc216f7fc4050aba99f8833b3def4e9d3ba8c4a74dcd7c85b3caa4bfe8a2e53dbeb90267897c2be933b9db5396d58d4deb2c13fc571ab3676754180d8d536b8e566f29307d4b363c10e00316617e468f77826f76a4f4504525941de7af017e197de3559bc362ebcabd0dc18777565e6893e2f3c4634921ee662f0af2de76d09cdeb65729803cfa58b67488b10f92461fb9cbe500c34e739eb5f83a0d7b987eb5f805475b994a84605705761a3061be972cb7b5cb68a240f3a777e2b8ad81d444c5f77cfaa25b6978d9adb0e861f02855ee43ed1f567525433a40f0d5e4fef71fbfe0565fbbc8d8ada110111b60acf773c4ee18bd26bc2d83c963ba181980ea8d7b8d13fa3ae3510bf977951b06410bbbee648d9fe6c0c3eb1c29cafb88b10735109c14d3e2126b1d4ad322e543d02c62eab7e9d63824711e976e4701be3f5851ea2a84f62ae76a7c7883dfd5fabdca894021d92893f80f663d1540cc9bcb8102b80a5a16a880b3a407d0efb0cc797f68290d2ac7e3166ee5e2b488b401b5f0e29473e8823e48a565d16a39f62aa7b1a3336236c04fb0de3e02cd822045d8569bf98e429d8a03997e7725a15a5e135a11acee168dd3d875f40bcdae32754f30780174827f271bdf6f800c773230c4e51a1ab56503f0b131c3c6fad90fb962f613bc7d2d44c638fc18c03c131409eb3f5efe2f247de763ca9f6a2937a40c5edc331c8b3ac01cfccb9dafa48ad3b93f94ebcdd84aca409f79ec8e80f043e149a8681cfccd1a444b7373472d5040262de44d3a4bc85cd7924d4ab121d0a25768baf17fd5b8611f0313f2dc47a5249ac4e97603ddaadb7acd3d5efcc0d11dad92c8b677eacdf99998ea6e6ea6bc84b269f80b89ae829942ba2e5cd4e2966323ccefeaf62493af87512b2853a5f2aa71fb3e1e1b1ce00d0e7c29f8fe3890d13c90b42
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 a51580a676e7b2f39edd5e2ba0cd403b0c9a9fe99e49c7dedd111840ac372a6532283f5fa80d2a9a345708b1e09eacf40d3af4370eb6981089da5ce4cb8fc353d0d49ce56d8d8b39c7892c953a352763fc3148e0fb7b1d49e2105e5d6b0375c42dd55d805f902e28fe397a6bcbd7022d9396b3f69d1d7d1c930259bdd8d974d989cb6957e2ac4ac784848e10a6a5118fc6aea4188524bf24c80daab3499cb81dc0bdf218fc681bccc7fcb53adc5eb54e216f7d23b9cce8883baf7e9c8961b4629f4bf0c048ef49342d8ef082b75f45a295a2394a9cdc781cb56e0f2111350993cd0d1fcc3983c3cd383af03c0cc8b02f2a36e806048ae1cb39fd89e10bc9a76e5f70146291a779b880395155cd9199ead289fcc492eda3b04ccf18f5ca586eeca219a8a8142082bee9e4c89dc5b7471319cc339f145fb59dbf0c879f0062f4aecee9f0aa361b4b06c83fc8171701f084dc3dc2b00887a904b425976f09afd8e5e3a6730d932827856c9c4bbf7f088af55d989f7c68812efee764264b52224204407cc83443db4e7e0d490de42394eea919cefe32b732e5ad9c2b73e3d50f9614876cd909f42680767bca44e9bf9e9cae7b8c6eedb234e40edfbcce1ce4cef0689407ca60f8e7c452cea3b6c032ce1c573e3e5b23fd8e5d858e44d4d613634db1393bf68cb8c66d595534e07ed47122b5c095aec0cf55d33b00761942855573d04651e0a5ccf17dd6c7baf7064764294b178007402b2244fb285d7cb2a9ffe0c58478cb955723248a5a46b4ee4cdd5391ca2617a03975f8badc07fe9a7bf4a1ba398ab360f352dc849b3a8ee86ebe02665cad743c8a676bcf97311668e81b4643b7150515438bf5f3427a0a11bc3afb9100c0e965c8c469a7986c14d6717463ff884136cd76f5eb10bb3c75f293fc6b50e2061eb1c9a75a1a748c5b87e987b61729e1865ea3fd928739a293901e0dae4fd63faebee188b86feae211153ff7869ada317a7e5177fbd0a78dcef0b066fbfa579117db6aa8c81e58448d20a9ce315dda89d43c7506863947183f21e674cb7778374a800d9126bc4429c6bf6b38f8a108dda29895e1fc723978467b9f180c33eb5e341703ae1507d20a87a8398462c48681e14592a24945b03aedfa70b6701ee9d86327c0961f00bb6a80fde03257f72a2b36272f282ff46f0d36d10038d3e6553af52a90e75cbc9fe01a975d6e9bb132963446789dc2430fdcb7907d686f5dc86f234cb806e079b5e16f65ecc06166903548de22e0b277cdf53e277b089abfd89bb8387a5a634e6f10668f28c7b654f9fa4a397cef732557627af46bd6ce697918882e34df5cec47099d802072f6e30c6511649ddb5c45a9535d4c78cadeb9bf085648185239a72a3ff689e3fcbb70ae1b11b7c7c8a5e7519e32c04c0d50bb02214632519125c18e1acb5b197ef0a7519768b998030d5e3b1b7be21c39655953a80018aeec73c7996c35fc10e5d88e8b8b35066375a1cf7338aee063e91b06494b7d7d22219ba53b5b81620a572648893e4990db5abad11ad008c726e4ad935eded075ce3ff9279749ddf1f3c38e433c548031902b975c2034576fa6f8074557cf183f3676a0eb939f28ff173431a22bb5f90da389e0069664d097abc96becf95f8b2a110b341011a7452a06b75b918390bd4140f0ff946009e3aa84a3539987be28cb4c62efde8b9bbdef9027a27dcb3bb4e29205905f794a7b70c8ad4a7f0bab5eb702bf00a482c391f4111a327a14bf13b07de8d1d3cdf09dbcd3e7a914b3b0fb08b6bf6eb8f2ae9242f47d391a9ccbff493b9bf765605d0111710988705893597d6b6b3952de65dd146f30cb01635b48abf977e860b13be86113947bb05070ab3daffe67283b88c653870ba98fbc93a85fb3a0da741be4436e3b471264cde4fdbc0a2bd47dd9e14481da7ef0980a1fe447a9fd59a8f77ead64a6a668b52c3a3c14e35be723278f7f4e7fd3e57ab7a133df75a774ae6361b11fc35f311adb8d4836a1273044442ba9aa04778c6468c7113cb292eb40affc43ac2c58f7f860e2eafd3450192e0350852134abe5d0ef522f681afe33fe0d531dc10219e039dfbc0869c03ccc35d1c80ec0410b33900fee7b899aa1797763c03f294cb67e9e
The same approach can be used to present a single path step to create a Back button:
Breadcrumbs as a back button
View code 82221b99393a7477d600ddfc73ad41214d7c20345c51bafdf43be1479a35feaea9211dea302b728ff2996f8082db08368cdb2c5d49ef251a9632f5ad7e296846c433fffa4d5134a0292a5023cb30da029ff2526f6f349893d84e8b8714fdb45ae90a3fabfd04acd0ee490c8a3433aa014fdd6d3be56973400e0fb38313a9a7ecaffe45ce8cd55d4ca05f05cf87edea9920acd3ba3229deb1b8c620cf5f0ea45b8bd0e1ee24db69300c892374fa12051a23cdd0318111819fd9cbcf78b731ee6e001d050d538461716576f79c1425ad7bef80cd9e137a485be0851c7a9709f7f9c50a341ca32f597071e3ddafed5d342b34591570028785dae950cd63e9b55b75d43a272910b774b407ca143286c897bc0c8daf6beece02f26743e11690431b1847046c017bd9201e600448c99717a4ca202afaf84a4b403289b166285fa5184c03c7ff171f39936076f194a7a08e691fbb66f22ab9debfc5c5c149cc694eefedeef8d2a64ff657980f8f25ac645785ddd345692706c1212e2b746e39176c294cf4e529da4e1d2804ba2fd7be8300ff61a9fbd47b3a461a0e7f5b41d6716c8340722f7a554aa099fec88c6dd179ab9cfdf76192db1b3980bafdfdf19ed5c109f01f739c26a17aa5741e4e5bcfe33a80dcc57e19ed5c441e50c93fac9395b7d6c0043867c9bd8331656c217616d9e4addc03340570d741927a4a78f0a9891cc2bfd8eed5f1690774af4fd3c71fd5819fbd70ba65d46739d4293515b3b646ece0d8fe7bc9f396da09d73e266952c86b341b0e57d636281586fdc31140719e468ce1ebb09bb2a22bac7c0bd279d5469ec3c488d2021ec0ab4323f03e05f8428a87f9c3a1851aefdbc6783760c6221ea5c564f2a959f4c35dbecbc706b8223a376392cf9f2f11538656545162d2d28688d3a98ee2f12adfe8e40f1feb025d7c8f0a3332613de6ae8fadbecf6095a09073c62384b6e17b362a76b735d53881f93f605bd15a620d61b8c911443964ec1f5fd6dee34a3e2a2c63086478b4bf7d4aa75dde1cf353b98956120db0b87b3c35dd7b26ba0d16ccec6fd0313a8a7f03ce2ec340df0135412728044afa484edf9964abe13c51f0abb3d345a46c410df32dd3d5ec9aa90c5ccb2c1fe77ea86c7f3a5a34263eb2d510f8ab630b87edbc65e9086b72fd1fefed4e34a346462a928f63a5d94c
Or to make long breadcrumb links automatically truncate on smaller screen sizes:
Breadcrumb links that truncate when necessary
View code 9c42b656a378dba9430254d87ff858a32a45f176edc61d203fb7845c857f2e1927f3e92f4c982ff23abc55792993a96835b0995a78b13f8220f6bf77dfe7c178f8fadcad3f0b002c2abe2b7db4b37c658514b748a0bc1dfe7eef2e49ba2a7f1b1c8ff4b0c9fab2b4c4134787411e306be4445fbf173591946c907703b032c33af971a6e7331b160380cd57564b9bb4b1a4b3f23c0562bbbb8a10857208e9807583cb191533b0efc0d720b0497c849b9f158d8c2da4fe1c8473db56a5efcc95d6c425c2d3b63347af825b839de20a428ae19490a1b008785e54d1bbc82926cd48e76d3675d4e20c3fe2727bcb6327261d513a43a79990c652e47a5eb636b93be96e34ee764b96f7b82606f69ca6d62fd766b7b8244c762b9ec7f30a26cb2671f092d4f5355de3cfdca9e550647b041f005d9f9b50d11c206a23cdc21f6d26d4481998df48bb9eabc2f98c7ab2afd2fc52c991f05c69f43d2ee10be230f9d85c981a7cb02ae4583f0547132c7f216c772fca0a8a2a82331ab12598559f538b1c20fdb4b986d0cbea2a9986bafc5dddc9d7b6d6355691aacd44471ae20c2d078955eebe0a23a3e129568e7300be43f56b1bf646bc4b735677e3095907ce96650abcbee30f98553e8365d70737745903e46b4a4decdd0edff591c1fb02c7ed5182a3c2126f650daeed99d7b1e095d8d56de683767546758cd10e57c7b1c9597abe3dfa29e0c3b1015bad72b73642cbead211a4b0d57f63af4b95c774fe33efe972fc3a0151af89498f39e6f8cccde8e8fd34bf6ebae320e3a111e479ca999f32ad9575947ec350fbd5a821d97ea4c9ed94ee5075f80ad7f558e5b16056fd9a73735ff95171a25fd2cb882df1d60730b0f0db54dc2792b79a8643718dcd5c7b4a9c5d312f6b3fe296a1ae353b12f59fab6f5cd5554feb7d1b279f0b000ad6be563b5f330aa7eb4e67de1062b6a8f2cca2d688cdb48ad81d216ef45f3aa9730a21b5e649402192f6282a21134f1ebac9c520b35117bb5c79169449441d447f248e5c173d45435e3aa19b641777d3c3c416d4caf665ba7552e2883551a8194130eb0650d2c75c3345fdd4e95e26e0995d1f967aa065145a8be9394928ee45a4fad9ba5d3696cfdc2b0e48b4b954fbf10f4a9cf08553881503bf573a0b992475e975b50619222d78ec71ffed990eb971e2ec770db2508c48e2ce06212e5fe918c1140c2f32831907161068663f0db5566886193db4da19d70a3e02d21a2bd4d9e7771a18757225c8788ec3f1ea85f8d9142371a050869a173ffe4a473b576f7b692f17fdc49782d10bd2eb2cbc3dc944235437f7b1abe7ac217a6e907a611984fa23f0fa0e52c1c41fcfd58a8e3482dc7d93135dad2bc4bf1e2ca4a979a800087df216937b2ba99b6ae7b7260d400640f927ee92c90a13483cc2ecfee571d7eb5f97b0679bd4996c02041cfb174fac4da98dade987ef60f9360324e7381951e9bfa13904226947e8a201aae5f6f7b63974b75877c90ffb53f63818e3855e06f3715d910bedeb472e1cd8aa18feea99731ffe5c0e0e4a0b512c844c0dc67878c25977a9fac8f8559a83d1d86fda169691f587716eec281c3f8e2deac6230342c368204e229cd67020debe8b64ff34c0ce77217e1bbb509595b2dd1495d8c8f0e202cf671b1cbd731567d32cbc007ea0ead4125ec9b204f726e693370de80c7e7eb49dee072713d70b0121e84f2f26dc7e11e865fb8e8becc7235a44b404a6dc6fd355ce2da23dfcd5c554ce23ba3bb35d754fe1034f480a244eddbab68003fe81d65d2251c228265687ec388e7a25ccb0939f3f6ce10c3a604ad9c1446b0d59d2f0cbcb7eaeb9eb68bd92b16bd73c43a6c98eb44a089790b2e66e709a0eae6acc508bbc9170c338a8a2f82a3392819d0ad166877e3c2f6cc1b43923ce6cddb330db29695a7490da453cb5d5fa0d187c37b5c38277860bc2a2375a37ddac224ba83e2470543bf5471fdf4da54616988d467504f19d22ed41a651c23274fcf79e3613970388a98d626a5a886c29d3bac6bcf7ddb7a7a21f64a925b5e2abee57551eed9a037c886732abbba73f5a19cca017c590368997254ed71ab9dd163865471400ccd8be07a983dbe2a6d3e4f8be0381870b3d7fc2e7fe61a580629a2b4b2be526c3676a09dd49a78e612f6946fdfc7cba9d605fd29d199040b3a8b242f795c15c5d1534df5f1ecf018aed2311a1c413d984743a73a99631b446babaac07af1873a832dd160d1f147bea84bf9743863d0cf8c4eff695486b7cf3fb32d5b615051a9d17a8f13cde829f942772be40801d4313d6759bc84172398309286b3667783c0b2101
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.
