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