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
1e03b4ae57cd90347ecf80b997adb713e8db3fe37008315b5ed9413e30ad688c41938bb4e85e129cb0399962a45cf3262bef4ba768b47c2c80d630657924f4aac24195c330cfa996c39eec80e6c2ed97200aaacd98254830ea44de5c5d870f8de1f53b64f2a9f0400f15fa7453dca669ddad08aaec6b74dd37ef2ca9db9ec46bdfe719ab44cc76ab6a6faaa0207523fb69f70adae407e7b623c2b6bcca3c6caf8f6ee49611b6cd9614416356678f40a734aafb9ce5f6df94430bf8e50293010b

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

Breadcrumbs in pill-style container
View code
4cc4c7ae04025db66247d89671173c3abb514088d329acef15eb7ed3eb4642674c71a1279fae623c79ff2d0b36a5585e54bf59fe4627d2c980f447af62002721df7c41de80dcc2668380fe8eb25eb930711aed2d6525be8c2b63fa42a66dc905ab9f7b9ace8afd16050b281122970ee4ddf5ff8170d6848387fbd4d3c81d480b3b05cdf6428019c687df1198a95c513d8d70fe0c312dfaed59ceeea2172956dbad7be118859fcffdd1c1fa713d45bfcb7a62126fc72c25b4617c3a73481482fc9dbf3a583d27bd22bcd4445ab101988b5f98abb8c03982725d62a1575504cbd3dd2f096f21911ad8e1b8b36a3874a827ceade9dfd6e110dd639acab9bc8ef19ad6f3fc7b15a28f349aa5cebac7fd002f9cda805ff97ba399e5c78691a5634e900284d13a81683d9b48f94f09630c5886f648c44e502e88a6400c1d036ba0a42bdb00078e35de8abaea83eb3f71da6c758f70f50488ddc73a33fb5925857de0038f881e60ea8e80c13c94f222e7ccb82a70d9c37c6084bad1737a42917c18f0c0125eef0a6b6eac1ffc1e3dbdde0bf5ddee3d30b70c81b7d84b351752dc0a804b

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

Breadcrumbs in pill-style container
View code
28e73354a8764d1879c89ef4af9382b4a3d05851706abe5e438ce65a80eaf0d01df359b063532697023f78cb5ebbbc7ed97aba2fdadaaa8f515e3be16139ed89eafc5007d89049c2de2d886acf623724986255238612845ceca52fa15bcc52bfc29ea2a7c83a2132aad50dcf466d1a0734be1719e09bafe26647abbfb397283edd46cd98a4eb2d9dd6e6c30188ce442569b0638f512d9544d4cfea2e0558568a72c46c76a976a4a38a174330d9f58ba66a5d9c89d4435262522988ecb63c84483468228cad8307ea57e2568340d61dca6013f682e22c38cbd57cf8b1c9c01e023f96725b28d52dc026f98bee0fb97dc5c21adc6dcf906bf8ff5324e12248591750339a204fdb086c53296a7b83dd1b457db8808dc974384ca893b1cc3894adac96008a4bb884ac8b6eb2b80f5c1182178b89851187c4740e6b34c0e35fe46c33f54f80ea92bf0e35e8a09abf21b37424eed181104b647bf239be91e22e48b93c7798f1ccd2e6cc7d694ef082b24ff84647eb99b8f843753649ebb8eb47bdc527d988784d0df8e55a8440690dadee21b8e27e2bcfb1a70fbb3d333c399264e9a6d62dd3292ebd9cf88cac7090884e26092406bb6d59f95df30ad75c0aa27e50bc9988ba3f8a8b7aa63e90a884463be3c773011763e98bc173e5bbb60c00f6b637a1dea119f364cdcdaae0f63e72f336016fccf2ab8ebb49919a6a198e699b145fa5e819cd9dc6a1c84d40b7710a7686ed7fbe1396c5a240c824f69313895f2283480146d51a58bd26ddf3040760cf818321eb1e74ffc3954530bc320e0510cfd20d98fd5b895d7fe6bcebc98c256dbc5e7d976c22579743c1598f3f25f3101cebe156d5b4ba6361b4ff7124f88000f5b9a7ffdd7e92562e60e227f898d6f396260ee198c747db0f6662ba1ce7fbdbd998cdc59ff2c94e017b327f8651cdb56ede5692ed727c27cdaafbdef54ce51b52d1a4ed78c8c018ed518b117ab62b83ed46b6339a73240586a2cdc577747182e7ea6b8a3af55df3c16112a5b99465b4d0fa96914fc624b7546721aeedb76b09bd3f3475fac2b51604db8100cd89546546c3b112f5df812d00c92b059f3b040514ad4ff08a6bbb5da8c18ddb0a2e7eb2b30a4db1c4fd1d8726946fe3e68150a734a95f391a5be1aa83bb082164a3170a7ca113b8a3cb944f71996751bc1f79e35a3c9a6b0cda8630aa3742ecf5c9b7b02d781faf49e6cc92eacbf9c1ce40839319a1a49eede8f69959520c21154676f6cb4cbbcc413da0c572e37f0357a6c18b4dd1be54103f2fe857e02769ea934c340c8aacc5242bbba45f69506e9276b988887bc446ee14ad870e02dc8aeaf297cc325b6d8ecdd6ab804c2f8f38bb8fbf7de7d468d68c1621e5aabc20a9fa2c44efd368a9bf12148d9736ce7a161e4039d63bdc40fe9d07a0252b6b1dc314d11a292c77452b9a4e66d48b637672383a479789bc29f1b3d4a6e01ccdc94419f78f159710cdd26f9a1f186ebc50ae44046e3b86f4424899a37b052bea3f1e85443c044b6bf601eecb4f6fe425b9dad0282e02df5e

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
5d93abede537526a11128a6f729c433ad9c61d806daece13635c301b34f4b8aeae73abd7bce7e9f7dccbe2154afcfb2e481fd8374e8eb0a597bba717717d38ff5c6efae62fe39ba700677db2e1fd918ec6927a7b146b1585ca08825378814009121a85ee2d87821e286baf8fc073edd8ec319141060776111f828bf6e437fc65691a51435e212fdea051f9e7a53a14c56bf132d4c9d51c427b74c6366512d19d8ee1659a9143dbb70931f8648fdcbdb7ab9d3e90e1c60ac241d9c33aacc2015cb371eb89c54e422ac3104c6531e06ce57a7f88aab5798bd4436f5464719b5a277f825de5202eca7e7e037245ff749d0d7e283c0a33bffd4217355daf2b66d3640a4ac15239826afc6b0b466976943646a4374d944cd0e7b89035ee1b11945ed82a3c12dde306bff44f6d622ed700cdd4cb0c06158d0d56be506e0bb2569c78c86fbb80c2c5b01ea5cbacd8662621997e80fcebac4e598fc6b4cd1c0c95a0c7f4ae785787ee80b2caf542b3997285f5409b4856d83475d4c1430b379d4dea0189784749b5c972f5344021d610a4252332141385d68a3b92b1a0487ed047396b08f80ff5ebda2833ce4dae9b4b415d8a6c3eb073e7a8e1d01d096210600200d5b593ab08134e51fbe2612f379f6cb884998788103ca4247fcc689420b0779051c190a568d3ab0f56b3e45dfc1c03d82b965ed735847f294884eaddebe47873296fcff5ad7a5b7087b0ffc71728577ce7a7f64b05f30b9f6a35b18041a450ae5f3df2342e9445da92d8c36819d625844c0acc31a2654166fac1fd2c583d8471b71ae80d604b744dfd070ec0485df33ea6340dec9ac6fba2a4961894ef6719a7d52995b74ae99648dbf1a3ffb592325ae5b6d953ba4640cf48eed0bdb0df84034be508176ded9a579ddd9b94e0d7cda856f89077e0e06e31fdf10d08185d71abf0ee2d3ec9c57342d7550a6776a823d37fa416bd0b0dcbb31e2a5ad908d65cb6fb7ce2f2206f9af69e0daceddea49630b91dca296ec8271b5d52cc694deefd05848d4a10866a8890ac10dde816269ada02eb5d1a939b725a4cfdb562d9e7b81e2dd9f0d1c9f7643fe1ba5b7e7730391d3a624659f7a566d20c3c6491a10d36ad159b0d233be5e4e335bcd30e161c11c47e3f99a883a547ae740e2c6a6fb56ec832b03b79c1b745d3bc7e5e10da0398f5abc3baa850df9d65c249b6b88d5dcd0ea506d6baab2485a3043aed9e7baf4d7ae8d77522e80e91a3b641ad6a9b80e5b028578a6a8395a524775099d0b7d11f6000ceb6347d0b521e5888670122f113735e57900d135e621bd78d1a28a8b73d0ef1c4087a9a916f54d3ed529b4bf8536340dd07112a409a4bc07225f527dda61cb030e9840eca08a37b6f1c37884f1dc3b891e78aaf36f00453d69396720020201f94b1d0eb907cc52cfbe77d0ae928fe9b6286d62aefd753e972747473eafacf8befe7ce0676e44887467b279af80ee42a9385c163551d54eb048253e121f26e1a44dc4c8f2303c09db2d60933aba89a7ab3ee136c23778e7e196832a9b98c401d6f57115f6c96e6ddd95d3d4908ed34106d412a0f8f9bcc2b687d6ed175a16bfe648da8c90c970f264e98ac5087b42253457eb97d7f73b4d4aa34442621fb68a31b07327050488472a6dba58619dab3a54112c994fcb76ba6fa6c3602ea8698f91803275d7a3937f4836866e82c01fb9b0da3d02cc19765872a00eabb27568e3a01ba70602b53b229930481d942e75424916dfe6592bab9f35eb1249bdd8ae059c51e01b4b62d77d3aeb81fb889ea7830f632f0cc9e21b01e8a817ff994a88fcce2d72c1724f863236398c0029eb44ebec49696945ed8c64088584acbe6213580c20424a8229a562c94fb8b5d4ca04008dacca2df4fb60ee480350744ec6266a0f6fb842595bf60b690643df5a25f6c3ba78d798940d3c8d2a6c675435c315b514283fbc65e46a3f91bb5fe97ca096f1574699e6d18ca62d7e80e5932835d29663b3a2275d028327d188e611421b95479cea8c6cd58e5749f91822fbd8ec848369e0cff8c31461898941aae9370aece08276d1c4e7b2504a43d152e620e5fb80fa4b96d782a3b17654402ed3de8d904dd174a41bef4993e60025e91022c25b6dac2

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

Breadcrumbs as a back button
View code
91b0baee71e1bfcb887bcab1c4d12486396a8bf6bd7625626aa01339785d6d253d3beba73222830d9f6b0479b36fba94e444fad09e1f9c6d8eaac4c11bd991f534703b62465123413fb3fde20a89da7013cdcc1f931fb67f588eb3861db92318ebeb9b46e5c73fe6a2634d7f3576e3fc17cc52f5cd4e2d5e0259899ad96f4befb1d034ae235d134ba7abb508a9a50784da41c36515b62931fc3931b43781f7eaa8412a77557d3c39ade7d91fe27ea456f477bb654c15cf0ee8441a89005cb138c7e7aca5c1ca04b20b31436a319fd01d42cb9e1883e87735a8c52e0888bad1f8747ec17e60907d84750f48452f71d06415a68765861d690ce20dc1df672d35e84263e38c93d0303fbd5f596db40312a53ba4cf13d621bd9637bf6d600c5872c295b0b0669de869174de0102ac175279365bc1c30a6a92a5846c08b3bbe0ddcefad9c7051b96c78dde337e2e67df23c2d116191b8774daca8543bd1d520becc195464f049b1cf71197cdac4e624b8a5bba6101831908da1d886b6ab4ebb922de79da78b31f5803666eb37d058241c5d27e1f3cbaca1789a145f508c3e562c5f3243c9fe02afea5d5369e9a1ee4078f28088a8632e1db52885a099eac3df3eb53b9ee173af0060cb0bf234809bdb876d705a48cf2fb3548e16cd7bb142e86997175d0ddc33b5e52c81147073f2278f7eec7521ad67f9c1491d15ecf5fdaff5fa0aab09d5aa4a728baf73fe83b57c290bab0e47ebedb7870e638b83e3a027ecf778732d5c97ec155d35bd6eae9698862a313a9854fcce8a1e901198287001455a8ad2613cf73a51ff1e4f20e86c1c0cfae8f325b3d4df664abfe58aff3ee66fb9b4bb1525707c51b8e5fc516c4e92d619a1a3bf9ff2a261e739d4d6df2a0aeeddedee416a5217c88da4722a0f0edb422f8a9cf9b7ca91e26c4182d1e1865946be4d26459777a68984bf7462f6b4a3e495a2c03908ed12512bbffe1eee041e42998483beca1e462a50afd9a94a83e44c4c5bc10cc5505793df28d1dbae23f593cb649fdf7d05b87b5914053cf1b623108e44ecba1f3ef7c4f17fb810c5f824a7c1aac619a268c6089755e4fa29a8b6b3bc43007d280551a94273ad1eb3f240f6eb800eca29f1a28ed770fea419238a41fe004029e91d1359877c6ed7e25b7dc536df69fe07a5582c8feddf6f4c65e04a306b

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

Breadcrumb links that truncate when necessary
View code
206c2172fee6f3c55e0607a26b39b203735f65229438c798f13e8816a236f07e26afb36d90af1e67de27dca72219326a35b288d97480ab1c879082a92ce7a1da182239d6fa44bbf31e0ad1cb227768ffeae93f67434de10ec95fb1001e709b0e9da980e0aed8365beae19eead04b6efeeb7e8cc69a9bcf6fd74168cb4e876a53338ba5beab7096b5dd270c4886a8a310aac888c53d984018d1e11d27ff9deb4e7942661f4a3221c72801030cdf3502ccb17dbfa39786ac87ad19ec7f59a6a6b26c426ce5b271f833af48b3f910f99c8ea8c6f098819cdd0e4f7367dbd13d4bf374e2e78cfb6734a9e4e1d4ec31cf81d9d3ff3f4cc2cd5a4b53d29db35b8db39c431695acbb836f925dac5d4b85e6b974a3d04a9a3770477820b77f1bcc28147f15ed08630b965f6c6529083588ed6d8c8d56cd6009c3c2da9e20cd1e2f7b779991be1618464075831fe128998fd3e43a7d256b2c1ce0e01f59da405eb66fe831a7013c8cd32bf3d9a728b2dd6af7489ba9085ea3274f2a6121bc0b9b1b26f149b4607fa8c9ebdaa871febe1a789e958066f94a8e86aafc832a444d93a739b47390d3417a3dedb1cfb195e5686fe98572dfd5d92bc4402121b3ad1be781264be34c863ac0928a17d52f6ae6995b1f5678c40e4e9a033ad09a984aa0a8ef3ef71e3203bbdd6e97a4218893e30002b563da7fb94c426be706f190c35b53b10d59072707c83c333962d0fcb73c5c45c4378b857b8d11ab013da1d7ef48ef81fde88091b538ba793a2d26c432d76088bcae959810e8cb367812240521d77506b755565e7cfef66bd137add27e277774a4d668a215c7a631f6301df07be8bfe80de23f918387e334846214d8feb9b12103393aa638eb42531f4812f4c3ab79ced85dc04e993a671413bd3c30704ea3bf0a24c7b947820c43e6d31f0f48a8a3d8f61d851a70315015f862edb25e4833bf41041c2c08707ad73064dfea8fa3591fdf23f0a47025c6ad23b9cebc4f0790d56783b36db75bb06a36887e57c6608c3bfabc47d0dd72021306eb922ed110d3d6602c214a52b68d4fdb5ca4367442bfe38491612e0d6b19760c534ee8576b410fbf55a906387b3b4bd3bda2eb47c9cf20e736855eb68c8790f9c606810e099229bdfae00ae370e2bfc76395d264578f01ae5a27205898dffc4ed23b3c4f724741897cd808ebf40b99424a4d36a481ccff90b91224cdb3153d4f7556de414a74b24e9ae6ec8dbf44916b82177f65fd82715d974624b7a688f7ecb36aa21a5482b78722e535f0e294419881c2ad7a3e2f010bb39e5f978537abc8458361a40a08313c38ea041f7578778f6fa378f1871a01dda9ffcd6f213d20b4dca95035c7bdf6067a6aa7ec16500f251909a359b3a500b94f969a234f060bbda7818ca2dc87a2021e14dd4cd0b4391634c9ba95d068da622a7ca9b80f4caf208eecc48222d7ae9fcce267700410c03ed60988ee4603408473f758523c0625b14000478b9f97e34fb19712d62d1f58ffa2ec6a036060168ccca2d5e719c3500b6ed7c1d1d6d9b7fd78a8d66589a88840489846c96014d36aef050e276116fe77cbb7f817ac26dc3130b6f788d77b37ccf5311bc500222018b9de6da2af6015c7ef86e5b51ae59d04b8ebd313cde012f202e566d9e4909a2a2d04262369a014f4fe29a8b485ef23630c2f0eafd03c3d97d86d977d2fb91be7a3d04a20fcc30c1eeb9dea4a52056c969231eac992896ec4441b6b1137f1c695c3b7c513e61b960bdae7033e6517d95390b171003b5819fff15f3b60a32d67d0ace2acc21e8aa024103d070dfce6611f8ee5d1b7e5bfa7a61576ec44c950d96aa374de63a40ba7e643c6cd633b89619439016b546f384a434f9f5c5ffecc53f5e6a5de9e080dcbb97348890de91f7cba3451c751623eb700969f50ddf5d5469728bc845c6f16a2ce12d94729634ee547c5e348778849719913ba045fbc47c8132510ab454344e36d7cdddc41b2fe1f78cd20a8fb4e2bc21f132352fdb775a6d92177a5986875377f8e0e6afc60458aed4fc12fe5eb8110a14ac6d7fee8b32485bb41221991bff0a2e873ae3844e201da30fbdd70a223aa0eed9a2c569f5e302ac04ce8f4be2262b81e7dd184ee3e2602b7010d5d19bbc291c3a7f2a82162879d87020a30de7d41deb324dedafbd0462a035b64fdbbe87fdbd94c0e7d5d624ef94986d2c27ae0c3a0d7d135416517154936f87a0a59cc23b493d6ba3a8bbf0027fcd5d39ec3dd5625602ea1e61fa124c3b3edd84271b13f404b9007f50fe19028257bca0897df300d80550a391bd12f53917dd1f04a8e74052a552366837b22c0eb49

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