Breadcrumbs

Breadrcumbs are a simple navigation element that allow visitors to move up the content hierarchy.

Breadcrumb links are provided by the Zendesk {{breadcrumbs}} helper, but changes are possible using HTML and CSS.

Standard breadcrumbs
View code
198dc48b7fa6ccd7e3ff35efcb9d7a7c7d5d3a6e9b1216e927a40094ca5c872e33b3c1ea0482acce7e7973c49f39c5373fc592f53e59c9e3aed6524916d5bdca442701fed017736c66cee3e34614de5bbf0d6c4906c5b9bdd16e79700cdd611ee5d4da095e844fe6f2a616a4b0ea0d7c20a572f3f4179de79db875bf00d805abadf8852ac68e2f550b13bcf073c3c3c27cfc43e04e0c94fb780aa35ae27c39db9a5bb2aa5c18dfee3e2a7c5da2dcdbc4b0fc1775dbea5efd80e6a0c4d1b2d628

Wrapping the breadcrumbs markup in a container with utilities can change its appearance:

Breadcrumbs in pill-style container
View code
3df92f352f66588e7ff1a9314dc0586e8e335bbc56cbe30e08739d35ec0db40259b97c20cf114cc1736d795d8d46ba0332802f7e067a85d2e8725479781ce503a9b0be403da73a9defc2306a0233d829138e821e8d5922b37c237f095270db66253fdc0f43d4da802afa7f3567c6569d2e98c11df0967500c93cf001062ef734d4ee33db84f17c654367f0d4dd21af9166897ae8797914d9eab352819ea8353cf3f7be5448e0c7e3f94976cdd2eccb62b12de47c83fbaed250d1c6481d330675ecb71c66028cbc4bc3a3b78a016334ceee33bb650d7e9c3a800fb9498106d8f6e4dc3d707d4cdbe87057e4844eab09aec73707b8e970fb7cec41adee2a12c13473bea4898b7a2a5e858a16439eb3d97f5e981fa54ea5d95ec00cd7dff45708950790d1f5888b4ab19925be712e519214a3e701d949eb2dc0540a506e38e393294a73a1bbe773f156e396d7b8e8a9fc625a2cb2c4c0ac622ba8d1071fb776dc4ddc18ea932c6bfefc6900129b9cb073796c1599e6b647e022705d60630306818ac66414545948c76eb8c337ebd709e821c30739e5cbc8ebc293fa87cc6e1b2541

A little custom CSS can be used to change the appearance of the links.

Breadcrumbs in pill-style container
View code
c40640c642031791a5d6d7f16f0e17282067ac40d35016cfff862d23526c4cf34c5e035e94553d09f583ed904ce3367dc2d6634bdd7845f7c7a648cc46c61f9347a6e659d4f20e803bd116774e48ea1af8fd592e018ae288b0fbe70f9420549a620d067305d259f3cad5823dbc353785f55c385f7010f1ab908a4212bde1fbbbcfc4f5d91539232656f1bea504cd5cc0701f04479db282fba58c9a230219a894068f14d493bfc77fba1f67739d6fbbbaa436b472a0f6e5717d18475df6f70fc52c89ddf175e01d261f31e837f6012ef76888dd531ecb755531915a694153412b2ddf07d627eca3ccd5288f016b547b7460ec7024e2faa5b2c8ea9362e8e7e416844623ddcd0971558bfc5bc100e3dab7a00dd0ade917e92067db600b6326a63f996040b8b89c01c3ebd28864a08d2ec8a18a456199b7feff726924cefe42375618d189b9774631dfc76c183e0307b36a1ab10e8f471ad998dbcbeb26b7a2712ff06bce70ac450a30fcf463baac88af27a5b06d17cf9a055f6f11721b816701d8e29d78dab09f45959afca3e561e9815481ba326fefabdd80dad8c0299c332a087af4f51f359b67b52cac5c4459092bfe119782e1477aef3aac1fee866d6f286d5850528d7a26e9c8a3be9869d5aafbae4ccb469da5421619a4341f9f29a6b92ce8ac15e3b4b7a3ab1830c6afa20c180b50e1e91ee0e2a8650dc679444865c9018b47a24449af9d210dbf259614afb597f7d8c2a13b2ebf6e15dcfeece837d8802100dac55d31a83a0d9b8ef1ae66e9f6f5e14fb9590eb4dfb6d02b9faa01303e7be4030bdb40fd9c8ff92fe1a623083dff469fce45a0105091ebb715214fbf2199e2b474dbdad91718b2e741c094d6aff4dd08304118e24f7394877d1882d8cc16924dee270593932c4f274c23d9aeec06315208bdfa73abf403067d337a8f12e915bc3b0e6772bb468609b3e0be8df46833f84774c03503c62c31a079fd331f953b42eadf767cddf4ef96837d5c1b4a8d1a4c75aedfe9a7086dfdc6c1ad9d0a0d4dc10fb206ab4b75a529829248daf0f642c6695a3c28d9a4e04fa8c9b86c00c512bf18f344404bc4a4023b1abb308bf75f3fde24dbb14779405c9adac9ff9f98c12fd1b0fd90f0b14176b3ee60c3f4e670fd12b75e93df8a6841ae633e7cabac47f1aa4f0284b958ab887225820a9e98357100b40b08ce9459ffb718460cec9502a9c6d48df597b20cf17c33a469ea5b0173efeebaa852a7f8736b51540a5498cbd70db845054f377fbbcb83e611b02046039e8640ba24d4b574da0a8c0f01756fe6c37cda5b99b26fc0041ea214f091ebe35d8ead8db9f2ba22e63e5c9d5a0b9e096731b768967b86da7f2db294be5bfd36e6a4887e2bde28069ea1fabb0f6ad3ebe8b1cd25a63446ae85cf471fc9ea0698f204613dd9e499fcf9ff3b2a5c5463f4656b59ec1493d50254e8559e1e3d897f754a2de287f737266f59a3a831f398f6239eac3738b4bf470f917c19ab27b2f2377d08f349236d14f2726f7366930ae4c96eaf62fb3620bae26396bf8a

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
b4ea427f72414f4050c8ceef045a5793bd012df6fa6bc9ba183f97d1e89ef3c7a9fb54ef2a2082dcf016a40e2f63f3545a4185665ce81b967350cbe5823dd781ec55f8770da1fb7ad3512a4c44eb36bc991d01c43990e37317b1bb88eea75a68c7e9a4e747cc160afc6e99bf5e1108d80f6d699d86f23ec78e4a8a2aef6ad637534910cdc19f727edc20116a629f646e11732ed23f189dcb584a7ebef85d7d4a19e3c263c39d8ec169022cb3509db7482376d3eef48180756d3cc00a3a250219f2ae9bba44fe993c2b7fbc9448f49bb56f9685d2dba0ba7137bf4ce3408c8a5b0c078af63b33615c48ad9a12d3b93f28cf4bd16e60933e1ddf5828cd0e2060c4d930c28618b950cc78e1baa18e16a78db2588435aa8bc83aacc16ad1b89fbcd3323d9b88cf74da0e0bba7f994b281298fbfdf36bc9e9485c441403d6da323e7e4fc9655e5b0431c6be21857eb214f50ebc40979f6d8c346a9d39cae167e2544f72b3cec62e095bdd627b267f39ca0b729f3fb8709a9c9681ae08f96c4c8617e81ccce8c06b4bb642428e23d6297ddc242bdb2e7e894813909132f75854eb36eb57c8b1b8683984efe552c6d9d797d0fe7aa051bb9d9d549c19c66a0cd7724349ed0eedeb601f81f58852cb1b52f7e4347a69b2d794f7b36e3851b4dc4bfc37316b563638577862e0ef8b5ef25a7c0f35d31b878230701f326ae4b75ffcaa9dc5f078a862136cfc52caac157960bb0f842438b7043a2acc81fb2446656be0fa6829d33b1cdc7ffbb12bb9092837c227d10634fe78c574075857626a826b47ca351040dc023803ba96b6c560e2a89425e9c6c4dee0603c5b4f64737c50f037f5487694cccbdbec2b65b56e2af77600838c1d71177a785cc6a9475f2bc32898e0d05eb09288db4be4f15805cba052263de52d4dbd73b0a5dd5cb8cb1c31376e8baba3f7679269ac7e538cfb064ecc5d4ff1b9151a5cf4f979729ecf2081abe4215a5dd4e2081c5195007fbe881fcd743b7342ddee88f712864742d4e33a7b12580088c8557464e9d751bba271be186911f69b39dbbf50a4c3abaf3c3f55e3833e109a53c82e50e3a7b191fb581bbfaf49151c7c8a0b0cbf14181cc750eab88162480ad3f901440753bfacfa4d9fe9a7e62bfa2ff77e317d59c4c0529ec7e6271ce4b9d9660a5209446ecac263e0cb6837c7bdd418b444d4492dea22691dc18bfae05c994083663ff8b064d61cbba239237db1d1dbc1eef247727604908097f22cd1e7df540840b0a6e2450c19b5161321cf538ef5648be2cbac7e7fa0ba77e6aee9db8feff1f2305d91c26b6ff40d35be1b2c0710f2fb4b1aa97559ad9da50c4389680c2add540e666124988772f3de81195041d8219bc34890c6886f3e5f3ac90479294d1f0f5253f787ae538c2c16c8c554b5cda2ff4d0b7c5ca8bf03b09dd27d8f732c071a699b0477e7eba57867173435d3e35f92817d4072dca812f758b917a491fea1a374d3d126f94275a863a7dd2bbecf480820740b872c00200164910d0747eb6d7ab96e282c907188f954ee9e986bf2a3eee0b5a9cd872446e6a22ddd668e4ed4416a27df9a01f3a03b3da9978c38175628890659fda72e7014bd39b69b0260ef2ce444aee0e2cbb3b2a09fadb7eb2f756b2f9da4f84b44b60cdf46326d9fdf25926272aa8b110afb2228393ce3b60299975b01fc0a67e7b25b1088497b73747d54c69f02c9f882a9fdb6c51d053e984dc8bf29b4b1baf1d27217afc064f095b564a0593a542b30235975e812ce848d268bbc63322adfbe22ec8f7b2cf6eac59c85affd70b3aa1280254076ed7435ededdc6dd5cee3094c6bf828432042dcc40d3d64182b0a957bc3dbcb58da64e70febb0159080072dc8e7ba4dfd050b94ed263fb9a3ce4d0e43f3b8d9099d60c5a7ff0220b1cb428c53c6a0516abe7f97ee3dcf963d97bb621898328e430f3484677c54a1293ba198e37c55f2467d4545a5d00d96f64af61cbaf1bbeea1017d2537911334e3b3a2d9c42991535ce906ef7e60d70b00dcbc994e87f87be958d4047e5630ea8a6934ddc117c5ef7d764c5451db6d96456f8211cbdaffa425cde179a3838a0c8b7b8f9a1fc74ca92edef6cb031ee5bb2267a4cd6e4f729fc6a9

The same approach can be used to present a single path step to create a Back button:

Breadcrumbs as a back button
View code
2610b3d1f0d8c14317d78c7f8fa1c5005260ed2288754a04d8be42e0675b1f54eca5bd7d3b224e5cb2226b62c3ade67afecc6da9a5e7d1f1be079b52f09b0f9e036da82fef0b5adc449d9638feaf89c11fb687e401d8a5bc7a2d842e2d644a7cb377e8523e6dfbbd4e4c25b3e88d265b485ddc879d14bea3bbe88d325787576a2f23e9b5cfd2c3dad79a810caec0b17ee4a4e7560b2652356b7702f77472e52ae15cd2cd3d34e534097b1dc62037e23fe7f8b19a0175a771f10a368333f063789b6b9deaaf80059db99e358ba28eb8858ffedc0ac042a4ddf8647f7e12cfbfd753b6fb9000f6d86fc08d58c8e62d86bddc34d83df506f34a0c8a1dc60381069e808afb22af767de1e3ac2a04f72b7b6fe4387e88e592d2b7820a76c4514b2bfc9ba682a9424d0e8c7a31697a71a17abe73655b7303915ca6e2bd207c593c662d4a6c89acd1a932a31c5450ba75fb6b096cf1f149933b2e27eb3b16b2c4718fa7ba57da8c0adca27b584601e074cf679d31eaab8a4a52caad0d13d0577e76d64cae20705c491f62c61efd3f70af3261846a5bbbf32d813fa704b88cb3cd6c6b905242b41a264b66753c6980b1b5069b4540440ed8d233c7dcff649295017ac18fb2d2cb0ecdf9a6a2bb45618e08dd8fa0cee659d1bd71dc3db21b909ffb67c7c48c959557f7d308671d3ba306a773b1e4c81e7541dfb2b7b172e59f91472aea66a981d75f2abe4665911a6914452e01a2cd36906345eaf025f89c1950c7e43ce1a2371e104c7689cc270f2cb417db7e1b1e357daa69678fc456e0f875202361d8366f63eec2cf9dd91292b4b3b04f434c7e4edd97779b427660cc29072f07cba4e8a2f8a0762617e33887c2a39d305d10403389f1778d01182464166772da276dd6261503d670e542b32773bb564803a202cb2065ec762a92eec26a2aee541836d7d1a5c8ca8e8a268bf5378012768f5535484c88d85ffe74abc965abe74f7e6e3467352e95b36a352ceaec5e0c15b0cd34edb0b6d9764a7d7bdb4f9f1048db2f85ffcdaa55b88772800a3e6833f1de55d572d1cf38e2908fc1e1d99ad684d8d066b2c78b29c4bfe3676486cc76787103c63d9beaec20b01ef9b19be6eb953cc39839070730b2c10a0c35813917dd7e1c19e24b985a0317b34b43da68ac4d5bb3288b18696b4db624e1442f90ae322e15

Or to make long breadcrumb links automatically truncate on smaller screen sizes:

Breadcrumb links that truncate when necessary
View code
44650f07c4456132c8e020831b481aa525946ec046b868f71e238e2a32a000c90066ef0f6c7429baba0ac4a5efa494498dd8a075b7dafb4787c4ea758d38fd8b1c3561351daeed0ea9f95fac8376ea3c999c321c3736e7316e6881037109565967eff4ac1dd42b195d40e1b5d4ddfcb6afac7247ea1ec359c555794a22c2bfcaaf9324a745ab99cd33a6f5a49e4071784da641cf6821a2be27a97ea4eb0124d1cce5610b96add2febbe61178e58d473db9f19d700f1ec86bb3a1907704c542e56535ee7efd3b8eac2f612b2d611a0e8da2935355498a2dc01466e5d04544e2e2affc304eb0c5656f0354efab3a710106781fc20709d584bb62988b74f9d1c3195b8a6cba94d49347266346749535161bdfa0067d3c515796011ced040e9e90b3a06c7c6195b13022ec67bcadbfc047e85c315925953c1c3d9ca5f61e54de19c432b497e84a98ed7a3c8a8e444eefb5389b351b4d7ee4038cd814d04d83b67257f2ba5cfb30a2d74c4999e948429fb2ea8404caac64abb41f3e96dac15e4fc9df0725618f744499c873e9d74af874b48ae4df4ea417d244ac4a5942d227d2ed3691f1235576574d5f1cfba2062075c9c3a84aaf1a9cb72a7112981663be212df549e2ea9972c065efe7ae108420b4751a049d033a054c8dc990d10c71b6567335b710dd3aaf25f92ba6b10b321bd9ec1744d7013eec5cbff44ad36024e588ef490323136966ee15f8d544e105c205ac8a800d2531d5ca8ca3fa869825093535b7bde98d8a5eec2d29c8bc9d97dd03afd9b8226aa843e7c3aef0467ce2c98eff706ddd345267070b0af33b0587dec69cbdf87ad93186839fd956fe60c8e9e4a2251345386195c874dcbfae84330067c36a3f59f682290158a21a7ac16f540cbbff7c797c02147d8ef051c237c4ce8986ee7da4472846b576779c6f44c772c02dfbb4b281996234d330c4777f5d9e81d9576e99c33fde0f5bd87a8750d5298d0de08ba75baba699fc852bb0a3e51aa0317bbf5b211aa437c0f9362c55875b3e9030273749946b7bcec705e43abfc9236319382aa1047f1fa2f53a8fedf7f72990e9ced7bbb76e9568507227e784dc54b0385d99cb5abaa8810ab5dd5a1c95f4ba2745ecd40071de8b7a0ef4952c6db6be7952446cf039750c89493633267502c3fdd18f73b11f08fd776886519af85ebd3dd69eb65cfb229f39907c66643b47ca4c7a21fffa438a34fa13bc3739a7e27096c7cf4ae92a1180bc51ff4767f8efe975e44cc10c50f54d260f6bfb5f7589f551f0344c875f81b8725d5a28bcedfb1d2ea977804defcdf44fb13f7b0fc53ffeacb84bcda43f4086252c01d398afba1306727aa48044f385942816756a5dc510fdfa8e5fe96a21bae05067869b533f61de11ad4b8bf78861195f797ef019bcb303d3b14ec5dfb05dbdd58a07abf4212e7335b43be00b108b98b98b8f4b4942e8c2b3ad3cc0cee166fa1bea9ec523e25569be1f583b895d9a715ab5b1fe130901d94c637d2980364b9375802ed370670a0d6867b013b800dd74b9c501f9ec0bf7196b3702f24fa522dc22eb3ed44d7024314d82d8a4a3dafdbb40adc8134ce9600c0f8973849f1b6163870e0343eb857009f6b4f86585696a6500173987a05ddd244b83cff5c7584610a34588d1a5c08619c794e6ee1680981fc5711294924811de1c72451d37584df8b542e0aece90da0cd43fef4f0e010a872ad969a477b4e77be271e9b4073d8e27517ad1eddb9c4923cb592b711e12b389f4fb7fbce13bfc20646c3386ea4603eb7f26571b2167ee67a2fc81bd82290fdad2ef72e059d7f7cf91ec0aabc33a365c638c3de399d5c3841d86aec62885f6e4c1c38e497a0beb8d2edfbe09720cd7fb04d6d00841493f6816190be66115955623b810913b9cbd4cabbc8e3e9851b178ecd8ccdfc0dde13af05bee85dff9c072094ca241d1e4364cfbcb73c6692ae0edc1c63a62de195cd2b61da500e8b5dedccc08de75f080a2d35572b6b52a7760e1de8e83009b687c1583d991043801efac27b7418bafff40f8132c4bb089d6522b19af7211a937f0145f4d34ae93254be26b4e933f487b536a99e7d763659a3ab671c264e86ccedcb0f7129465208f25cba7ed87e64d5c2e4b732fb5e8c0417f5c2054eabe1336cafc1dd7ebe5e4cc45da95b26bf14348c582e51a2e31ebdef217605bd20b0b38ba4a6696c3970c651a81f5788c646c82f911427dc3ce21ec5c551c2f57d8543e7bcb5a89b61edba20c5267129721038d86788ec23269aba3b47c8d8520446439d729fe2051230224cb3052f1d2e402fbf727fe885a08eff38e75cb73c0a0ea4e1463

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:

  1. Update one or more of the Sass variables described below and recompiling the theme stylesheet.

  2. Add your own custom CSS in the theme’s style.css file targeting the .breadcrumbs element.

  3. Use HTML elements and utilities to wrap the .breadcrumbs element, as some of our patterns do.

  4. Generate your own markup using the array of path_steps objects, where available.

    The article, post, contribution and search_result objects all have a path_steps array 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.

Related patterns