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