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