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
ff0f91e0be622f057e3d81c608b9b7aa25625431fcf1fde13df5e7142d4d5193812b6b5e8f694b20728cc2d5c55d6504b391b4b6eacc138f33e0b8371df3fda363071c8f3078623012e1652007bbb9b0e77b348c72489c4a506ebabcfdf4ddad4c0ddb65d8ab46d79209635893d2e67c3295f49ad8ab631e73557112cd042f0699018ba230e612de4800568a72bc83fee9c1b7362c97d7c44ea44daa41cf8c53c0269b5e9607d37a3596d5750be83d878173edd569c0e8ec154bcd971d4d6ac3

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

Breadcrumbs in pill-style container
View code
3ad1760c8fe19e3607a742c8811c02beb7a1563a6ffadb3f59880b34b9931724b36c0f698fa55b85821686b1b158c5586858e6235d6477932c27723702153f7fad90b4c9d9ec8be6819d2fddb650488ea68fbf9b672b52f5a81788c5e4487782125d68b39edc81f291504b602d2f0581dc3b9d3951f98e0753035c2fc96904292375a2a8e9575482120925c5f8bc873c3f07518d189568aaf41353bc19d8958830d446358c8ce3bf2943f747b2bff655d214055b40a4c431b92d5af81353d00ddd8d2f8e884173709419aa53c1a9083d57f3f031712b670ebc2b455a06c756cc39884d75cae22503ed2cbbf06c62d3ef90fa2e810bc90f3db435cb7d7d7ba354c4cb28c7e93b5b339444440a2959144ca54eea6234a13c0a8da70be8fc8b4df2ea78f0b6a3518b656a96740be52dc23848a7ea12556f1d9b13943bdafde7dabc22b3e2a38c606c35b0bb8c5505b5f1d7ad7f0de92502e48bc5697f71a0ecceecd767ae15dbad8ec81c5c49381db8d50d4145a284885962ee2f75c67f8dcc5fa4020c4c1bc0969382df5ba2559682fca025edbe11b995b63f38c2e5184bf5545c

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

Breadcrumbs in pill-style container
View code
ec80238275298534c98871a43cf55aa10dd3c35e30dc7a14ff48543f40125f2673bc81f9e20259d7f20673b7b44e7e422882a1a4513ecd8171962ec142372c9a6040622c695dcca8b8ca3ad69321c66b08c49e96501f58545254a85e77b75b22142e051a2b710e450d8a22033dca090b8c1544bb28e00f333c5cd86ea38e7f325249679ad3ddb36bfbff094d4fe14d7beb7b2fbb508e3ea04dacaf80c2a61fc9ae67ccb1ce3ee37927d8e4d6da984fa14240044325e8549a0769384c95392f9e02ae364e5a36e725e32c5c1126daa31da8e669baeac22ff19643b90f36ba98e1feef1a1f632826ed0a5df065362cb36820a2cfbbe29e3751a9f6801ee70a2afa4b6b0f9ff98239650c35b7dbbe78c07792997e8c669deeafea71bd89e4a679d6f6fef9db56d1aacd7a130b17f46dfd7134191e2cf23f875e378818686195e4fdbea4d2c2a3f387a5733ffdeea2676c2119aae6bd90feb3806e1571f6de07eb764eb61edf5d979275949380bcd55612570e73455863d9f95d3c1a63337eef53082c765cfc111418dc4e9c5dfd01e257add048e64d12acc015699e27e990a6ad9866a65e2d25956756194b3ab6fe383e8192fecfe75b6a631f6b2abc040288b2c6a9e7f3128dc7485f05fc1df3fb90723d61cb4362bd277cba47be1941810571a6ebfa0cb18cafdfe7b06712173bf93709e4e824ddadd30a639fb4063c88c98083e1b1ea026d003355631a6f7ada941ddb59a333e5e6befaf761c1e11c5300f237fa9141fcfe9cb18cadd0329a1adff2f3b3d4435fcef69dff303951a2f4b24a9aacdc75f0d94a50b6ddea1bcf76a702dd996b0b07cf6e7bd00fa76ca92c3a76245c8ce5a99f43b1e712b68672860e12bd58fe9f8be9b5d54e2fbd62b3029a7d7ebca971e53fb1289685b843796d8a16cc118899e3119ccd73f5829bd31924ea8ff9e03d41f7fb843060e0cea5eede4aff215afd10434248663d2dc39ff8191fbf472c97a8f6efeb7514b1734ae3c40eb397b44daa9b25a1f6759c0a2bdf53430e765657dd197e997445b20ba3a8be01b9b67a664ca10b13c31c0c7be351a4c25008457e31f21946b1aa004a3f8ff5e012cf1dabaa8554b188addc0f5cc0255264f0197d6c79b5588ab1bf25080b8c112ed221f26c5444f428d2a823f2d20c9c2938b0caf5220b4895ce38612922d9a5b3ce7cc322c30839fbcc94325b048d3c6052ef5c3099b6ec18ea7a43fee29839015758f7dfeb22869db8e09c72b8779f00461479bb56f4f102b56edbec4a201184f3d462e14ca7c5f0a43a99d17e75e8e4c30214c551d05a548942ad73d64e83c80ce9f8e9f14f97e6f0e03c821cc8127776784c11dbd5006cf9624060c881c2fbb21f0c46dd4d95fc309953cde7292ccedaef3838d6ac531fa015aae23f90e756f0a1f7838e6abdcc5f654831fe2b11a9635e50f5c3edb6e4bc65f4d93c72eb9f1e53c681148100af678bf17d6893901e0917629606095738c29f3ec39b39d2aa64b66a87d2e648bab6fe888bdebb8c91c8523edc92b1ad8d59d1f8d709f55d9e

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
afd6348eedda53674ae5320b28ffc2e9cbb336cc47becea2ce16256604a10910f0fa05334e87c9f60db993a979628131acf68bb295e5593c6b8f80bfefa98ae528bc15bbb53104af2b8c75b293f67c74d342a9dc2b510161890dfb53c473b8d357fac3e2be354a268c72149f73979247c35073f7d7b8bbad8c0d0b66a318318e1c1941bb41a86a4f4987db32070779bb44f77f267d4581ef39161d3b52c1581b3e7cbbdca7f94f865eb3dd430b32074f6c6a0d205438d0f7bb4b783af3c74ced92ac21b563e08c66fdb78c2e0cb1c6a3ee1358d728c6f4c26c034aa160e3d4481f75206a8aeac1015c4ebb149261001568ae1b57d020679fae76544c39661135718af062bfd3a1e27063b32bf608a4666f9c2d47abcc7a5ccff684fbdc2601051248a26041a3ea425e93321cc22c2c62debf1b9ed8592bd46767d44ee4c61ab9ec6e48b02449a3763cc0c446b6f764d36e456e1bae286019ba0a6aeeea1afde1f486799da81b2bf4d5139e89bd0b1845cc39c7bc4777f2010100749f2d272be271f74bb66df6e794391889634542b23c5b2b15b25b6c3d94383de53888deb15ddc42da7915a7fffb345a2bee3e5f72b431d2529ed381f4be60ebe399ca22d9092a99490d43b2453f4fba77591f09f070f7f145ced6a0710ca08ea42d8b074925747d2a97244a197681343a7fa831d6a2abaea2e2c996f0ddff66ac343fe4427ee7f54df341d8dda551ff3bf60ce6ff2b5f66456535c5f16fe84d525a56fdc9cda2865661098d25a3afa52cdd932e9f2321650190d496efa4bee3942c33ebe3ba807edcdcde97ab9757d0ec7c7fca289781ab1e48dddcd85fd447fd33a4c6794f8ee9a79adecc5af3a2e28ee1ea6e81b92a48d885f9f945a380ff3f0288e23a5cc953c53e491ff171e093fa8a1cab4ef6045d4f54c99999e2c809e416771c5c7616b50cd43633a61db0f62a869dfd10cddbe029474a4ec2bb76e1b8e14bc4aeba2e1e485bfe5e28821fc7d9fe12c3689e995bd81974b3c21a32c357f99a5782623dfe22e7cf1766c213788b92e2e08280f99e7937d18037fa92e57f4d1d399fb463098c901016b64a40b8e5bdd91137f2decd37bf61e35c7dfd90eb35d1886363393fc8643a69af834747a10479084bb341b164fad744d31b0579de17f3ae52c97fd90aff88cdadbcdab58805ebdaf512b0808831143e9bc1049549a6248d89133dbaab3c09da04587320309eab4c34c1f42c870e0d3dfae791a08f4927ce56c36caa0488933cc67d6d017837557975b6a14c2835b40ef158021596c8feae8d070109dc4e81781ab68c71286c242c29a4dc6888c9819c5243b63ff42a0b4e947e0f79ce7c62d6dfffdfeba223e78edf0d635d1cacd4b51a4014e269e122b9f305ff5a9a55e326f53cb2706558e92144da3851a8db845859371f346a806502d742a145c57093e2386c606cef66249a982f929f4c5384fc10c570e85ae8820c9170b7fb15bc12f1f59e72cd0364310ee32a667d436f59e57a7e3008279cf44692e1b53211452688f9c27610913a017de7f17481f73ada7c37b6f650627e3a053c839930dad6721393880a892048462a90bfccf43ca3cf432db1c159412205907739876e4014c2a7c9448cb00718b32f26102ccc6d77c5e3405c5683aaaa367d44578cbbf7a7c54788f0022d9f99be07ae18ba6211232e6b8f9476b0d5d1945585c4e87db1ccff9a7b9c882cf9bafbf56416cf0a59568a9a4c5d2d30f3eb3dc86aac9b60c9e2b36e8b5d2f9ccdda1658a11e184aa06fd35594a3aeef5ba975e2ed9a9794ad6c7b6c80909d27caa0beab11870912065ca11fb4bedce5ef8d6fc867de529dedcefa4e027fc794b353c5ae5e0845f7efc9581bb3fecd839ab83e83b948c684569f88268ee426497899503574035d1f8788f0ca42b179a5c9c0aa6a072e874f349bfdc3c6b1b59dad1552408f308f4bd812043f4b996c027fd3e88fc9a09cadd7bc09c08805ebb153b30339686c36eadc6d99c672ec5f87e097d99f89c21f96c97abfb63cfeead82192fee955dece02aac206bd8ea9e10f26966489e5a6624cafc178bfeaa16b698950d185b63a38b31f509b7ea35457dd83f56bf0170e31099be86b9e5a4353ef7d27f543de85

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

Breadcrumbs as a back button
View code
08cf048db48fdc34c18b5ce3bb915fd491267d4c83906128989b539ecbed2e1b5eaa6febbe61572c4609d36ee46ce0a6b166a54f767ccbb0700ddd3af12542c9a631d40aa9dae02cde6091524586f210850ba8b57c2ed9a0d770494bc9f94841c7d55c7477a58576bcc97719848bcba5667d849f552a5368085db42c04ddb9fefb40c0360b86fd89292e76eb9ccc6892367140c0b2c49fd56a73321ed118e60686eaaf309f3c15565113320fac9dc10bd16c1f19da3c39db10a5ae6169df3bf70b8cd15824359d84d9d299d0ec177eb0083458b907ba9861a061d5d53bf55508932ee6c5c3408c60214801b216a046d0c35c121428e6235c909705e6d3ae0db6bbbf2ee2aeed7b01cc3ba105cea8ff54341af0d53e080d7a7b6453b15d4a7bb433930d7964b2a4b2db2a0a3577ed2f05d36b16062d6cf6407f48848bec8c22173e0724be75349f46a10f3c56c3342cd45a9e19062e77779de5a156e95e3bdbe2a60f2be992908f5f3dca18c538a90b9d53b11273b3452a9a39700298b9cd835ba72d3a55898d5bf9b479736a13f74e3ae6cb7ca22c4c8e8912ac9d6cec1c5ea84f80ffe8a8483dea7f43bdedfcbd95283431fa03f54bf31bd80c63397615e5c57c172cb74cbde0fdd5d81fb3842e27ed97e14b131d89cddde876cc2aaad0f5d6028624a4edf13fdfd830ec747f57b95455602ca6bf9a6d5363a7d4b6efcb24a656412ca67b56054e5bed1a606d1d976a020ce57646d7aee8f055bfb6818f71ae56e28a696a4b371b198e959621b8d8cfb4962e78ec73dfdbf9e1a3b18ca58de603fb48b3b972649b4d5ba6d63b9512e38799b3b7c529ed392c35857dd120a78fa797037f01f90556a0f2d6e81f99511576ec44ef1a44a4b8280341250ae1c1c63e07951c671d5489484b27abbcbeff4f150335273ab4f5747d9f442ffa74c46b915ff0f0e0d4d16a12048eda6efa2df839e7e094aa421bd5d06f2b135a5a0cf4e4ffd09989252c4b7624104a789bc1646e473b221841817e85a10669c667492b4d644fe6bc939dd14514d983b1dd9c9ca9f17f5dfeeb0b24e4cbbf15a2ea0acf1922107606d3c8043e36da93a278127dd5552a2a972b24b4672e096c134f9118f76e0e08b0a111a0f5d0f2c3f5addd6a4d2a343addcbe2106e8be73a5d27486301e7d876b53dc6a3822f3db61b8257d3

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

Breadcrumb links that truncate when necessary
View code
f8316b1d778b1ed304e0b5cd3b288f0c9f073915c64b845081a4ffe0979dcae9a3ada5ccd43290de61677d8a9a7f873edbc6b5ff95ba9e514a13bfb3e14b66a1dac8753a9d70a068be17f2c32b2b4886437fb3ada5414e651c0061a894a2ba43510da82b2c7b3e2e22d638efc0a51b0255485af159515a852c67a05b3aebcb2ae16465cb4614a821ff9fb4977ad3dcee073e0453b8d89512fbf2395652d40f9afb07069dafc03666f070a15b1244ad8525c3cfe26e18cdbe635ee58883e187b6867f7fa1a9e3b9dc010f4f6e98fc59e401325e021a1d028b93695b8fa3da2b129e7fe59d74881897c8b863546d0326dc513a35738baad55a2c68af1aefcca13f9883c23bb0294d0f4733f09d0f67a1b447cac5e005e99e9fcaee7ff678e4af2a1c2524c569c8269e926299d0a71656d9dc8181e7aa8016c62a4a60dac868b4cc0a6a129f8e29a45ccb1ed00a6b14c294b699e0f9c1d7ad52c3698d3d7cb139b69c6080275074f638f5bf5822d51067da20208437cfd740e037f0308ef08aaa991a24aec41e42676c121633d01205ac19e127d509ee5cb68b09c3ab2ca8f56c2ae43e81960184d426022418e793614f8f4c845bf5921106c2912971493eeaa4fb48dc982aab0b7cccb292316cbd8890567bb95f992fcb879ab960f78436ea9661b8fd6e8661a352ac00bbe40244ae1b61c2981d07954c5b7581a7d47b94f781c0d757b028f232f3c903988940a02bfebf6addde5786d194b35ca907bd24ef2ea4b621d0143ff9c0c9c94babacfaf20140ac2f0be61e3a5eeb25341590b5c1c5961dca2315cb502e53e9f2665b000c28fe9410c8b0be814ed670c87c94ead4d23be6340e1c69726f33d7d2e0173f169609e7df6473498aa01765acd5e1ad31848e17da3d32fd9af4db5eafd07004460bc7ac2fdc8f6f081c2cf0329133102e21ce241d204a4422dbda687e59a83199d9ea008124407ba5253924f45b16f601f28ba33a713ac34079bce2b8d02e90643fb69dbe572605966338790745a5f2846373f3f287268095b37c18a69bdc7f1a8818b970b6ecc440244c8b8654716fd9e576ed0b67ab4f4940363633e9c1221b74a6c5f8e627ccb9769fd1edf33fbe99ae48b0586cf56fb2116e51b7e7df96dd7a4b6c53594139f4f68e4fd6e4be911e4c6caa9bec71a90df0cecd0c5f82ea9378773e975319ae0d237a0bcdb23a612cd4b1c8e027f279171e4806a7d630d651a2751638d26eab493041bb3d3626fbd2af815db2a8fd18200f2f481307fc1569436d175184d798751d4928f7cab8d32b5dee258e4a7c61a9635f7e59ea4b1557d955f16a2d36140ac0a10644ab3015f967054239a371703ea24101e0430a898bb75e536cb0e543948fb3fd6c475c9132578fb51d352badf0bdd7788f6b92e896a5f1e7e9c54e0cacf0dadb4783b1ab685979f906821f30cf45fbf0a4ce48d4ecf2584c6cc0837365522023662ee90631e602642a4c7323ea22fb611031cff4fdab125c88f1cc67ed64df60873d9d8cab57d243ab3bc10a409be29152abd3fad923038d7725d45245d54e353cb9f7185e9d6e8dde2f682fc98556930bedabf256459596483025dd356d10dfb084f49c2a703a2e43bee2aff3348f3e617ba4c307cd9963b4b64906042817dd63a50960873b6754566e467fc4cf38eb2f823df4997cc6892a967b73b52065bcba009107be34e2e56cf72316d6ae0786646aa3ecf9249a8eadd8ac3def5888c56eef92b17fecb3350c32fe0e973bc948b5e68c423a98cf25dc9ca07e1ae2acad311784eadf3dfa3cd0825bf41f372f563579116438dd84e1865407000c2651fd1837f5c57ad596126f0d4b19aaa19ac6cd0c9c52459158ed991fac515d20ce0b16efdbef202547fd2dfc1238d08d0082f4ea5aaba1dd17f682836fcf835adf975aa68db65c941893fe13ca8bf205105579c401be9c25972a0405089c6194c4d1b52771c68392d0eb5cb21d9cce57283fadcfcf63542d3bfc9d538552d972b89d14ae4ff70b6ff104618dba27b59c58f7a96d05a5778e024f82f3c92468b2dd10504ca834bf13496f6f35cc7d148abd8f9aec740832243c6eb873631f1fd9e9ec90150c10ad59d989362b014b5617747ecb5d9c30d94223b04533f6a21a29b289dd56e23c0e5beff6deb82b8369dee6abaa36cce82ba64b6941310a5e404a84b46054ad348977670073aa0c74c6ab8afbe13bd4c0e3cd631d46d92a679aeed7d3b1025331e16d6f63e4c403527efa70c518164bd498c0be52cbdbb41c06e75ce30580cb1e2a8ee16f846bb5b579a9a5760131da89797cc5fbbae524acd3e2fa2ec342a461ca18b8

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