Category dropdowns appear in the page header, providing access to all categories (and optionally sections) throughout the help center. They are fully responsive, meaning that they’ll look create on desktop and mobile devices.
Like other navigation elements in our themes, the list of categories is dynamically generated based on the content you’ve created in Zendesk Guide and will automatically reflect changes that you and other help center managers make.
Single category dropdown menu
View code c5baa0084e45f4ccd9f59c1ded6a5d19504beb3c4f347246a7b3335f79e788ca4ed44d6dd52bad305d9861acf2d262ae4aa873eb2616ee93600ccfed95c6855cfec9d905a00276d2d6003ce8a3f33f826f749410406fa2f7430bc632ebd73b47d90981aecad604e4187b3c9f969c76b74fbc655291b9bed32705a5f2e5ffbfc593144dea3ace5e06f3aeb0ca7121d1b6e172de0569d1703799a40986c0f9081290792cf5aeaaa3c89c01dfc19480273a1d0c464ec934b38f8e76394401d3cd7a56ccf88ee883d468b8d2fc52c326e673cd1532badaabec079bb55dd00d8919706f8d99567428749d54d24aeda09c3c2cee24e795b9316c4fbbdddd780b7d1fdf88135241dae6fb909104a572bf9f1c8902c1b0036c8d502cacaa5be6a6597fc721d7758e9a615eca0adcd5987ac6b7aa5c72cf35c0d431666d536265b2d6943193a17d14b4e94c6a70d58adb36ea64510f0349526e505da0fa106b3ebdba1e7cc62d060d45d834b1b9700ef2379024c2fcc7905e405d627953d5332a2136e51a2efe8b5bc07100dbfb1a520f375b32b3c1953ff82a1cc0499fd52135ec93edfcd292386cb8c5815941a11672f9c50259285cdc5ebd4826002ef5b7d0787a4cbe54dd4be803d60c93637acd5b8abc389401ba5bad9ad2db3c48ca9c4a30d2cfdcc98ea3a4307bbecfded66b93894ae56b0d0a7f2964876514e8692ad3dc6571136caf5da1ae204eecbb7c33abd2a9a09fd2004be57c82bc8d42369392eaae9a451c01e45d249fd57c82f3a2a00a09144543a7b48d8cd6daf864414e2c5e1692838f529a9891e6b4539bc02b2f30e4b6450876037bafbbbf7b33499a119f66e67b3e17ab7cbb2d103396cd314149abba81ae34b52f81ec17b8240890aede2b746eb032b532f59cd1678a349225befe209a99340a767971c607f0b778374b4d3e461709c4d209c4639259d9b071a2083a06d4d515c41da47d57f90e597ec89b6d7f0164a5c80299073f85748164fc1045cd3a4e78e99e8c39686d60e902e8421064ad10772ed4cd722660e118d45662935ef5f1771fa2ccf03f7e4fed6cede532c4f1801341634ea5c819d7e30f783d8150fc75fa8e16c8c266b4f0cf5edd1b6f00e59aa2305734476cd37a795048d95b43ccad06a2f82423743a953a3d7635f2391b77867d25d1d27c1c6a6a1c704cff11c804809c9621598da48dad0d6361e18a77e44c8b3f4b58343f60c323b15a3dbec04808a3ab1c887e6b0f338a0bb46a39fca93af74c30e3082edccc061cf3c66b5ea41dc6622a1a8125f2fa86beee4f3b99c1f83ec5341fb208fdfac47b389512a1f246690b75e069ef966a0642affe54f996a6457e9247acd457b554feb7cf50c890d386f6c080d56f5bc934a1e1e998bf51c46dc2e9bc6334bcabbb105fd29b6ea1b00a55464d9c2f17a9bb501d32d212e7cb035801aba8c45143a02b7c6f28d9eda9d37569f4eda6e0933d31f6de69390e4d96ab68b896b92b8f7a9f79d03f6cfa1cb047d75139ceda50d7f89983adcce23a8a4e550f77151f3ed4c2d9060693f6c81af0ae4e394db783c161981729424bf31e1779018a6083283f32ee4df4be9a3a5aad5c1e89ec87d3a365cf6cefddfff36a4c8be5022b75d37d7030769d774bfe236e7e6946aa2532e6dc5974a3caa965423e9b1aac90b94d02c10c105ac7dc0a7377f2d9559c6b3a641c2c03a8912565d8ba2e308cfbe6a0919bcaa486615aec96ae721536da78819dfeb0bda6be70699b6d3412ecfbf77b7d893c9dd7e2c9a183e84a7395c0d61a04cb757cf30838a47d964e0201d73579c385f3949a747b5a3d7995be1191079b8d352374e2b9b746ef8833b4d2ee4e4b357b70f834e8ceacdf5ec54b75f934f9fc13a1f3beb4161ee710744fdf599d46af66abb3abcbb88541becf3f2740476ed3b48fdf17f382e3c504e63eb6fa90db10c422ea333d3327705f2e407631c05e1bb7a25538e5c0981d09069227c2f07d575778a56601897d56ef459e7bc9c9b27617761e6d41102eac75c2745a1e83e6294b25b8812aebac8ddf328d69217725d5a16b378172cee50e360c74c571c5d403f023e74ac9cf75e161dc467414b4fc88a9e2792d8cbe66ae792499565eb0cdab3707c9129cec460229554ae703e7ac5bf4d24f87722c5371e969659df8a5fbd034603079d5c1c57da77e392f46b65f09b8b5e7963b8008c6ac5d7c27ae490a247c4f66c5f3b4e9d313a5adcd0bac389f3c6ec7be17da67be8db476e178d4a6e0d009317f728fdda1652f740658c30664e2b9412722b6422ce72d2ecce5d3554df19d37a3e093334c06e12abc9ed477639ce3b289606caae63da66116164dbf5e67d9890c6d05623af137cef3354abbec165a6c28f37682a9cb98b12422680429750f5804c74c0259766b56dd1cd9db05372ab3b7560f90e4c9e9de2f262d79d19a22d514c046a1893e08903cb50540d1e9144a62b6c9392585cd3de4c8645d2df76d7343dd981fbfad0c60eea2d329996ac94f38452dabb291efa7ea12bb8c0574480376f19638b6af31ac12cac02dd077ee8ccce5c21915f96eba8482a077be4734b1021cfe5d7338396aabe280e3f8b48e288e8446400fe158d7f0bc4701f9a8e5da38
The default layout is a single category dropdown, but multiple category dropdowns displaying child sections can be easily added.
Multiple category dropdown menus
View code 08bf6ace9015f1b25b123f8b8e3e81b50356f460a8d71e4dc7aeaa27a57ff3971391008a73805b74db726a4241343ab9d68076281268c2be871168e534f975e41ad17df53537f710cda63e29d9f4aa9af372b735a9f71047aa67e19b295d0cc1bbee88d07e896eef15f57aed783b8b2816042e26f99b823b453f770aa771bb3e14a6cd52e93724e9f5d3c6dcf28b54ad3c1a1b532c05eeafb3071fbc0d4f6c241a56d7de5bc1fb6df0fe20c7ea02c5ebd60bea2baa6d6db7c3f34bf7a1532d186919db7d001c3499ab2d0c4e78491d615e66c55148fc967b6d4d4ec8e07bdd2907da482fef6a7fceb827709d0284c36294bfd8fc032e403e35bebe9d80901367a2d5aec96b5665cdf0eefebb0a147d45bd22c8e6c58066c7a412fc201c11ca29e59b3bdb4e4e1fd9f0f517841f6be8685d31a33b9fbd1614a7bffb8366b277b2fd3b1f2731352b5dc60beb04173019bb785bdf5e1e11f406e6b44fb3148f7b788db0d6c49a2ada8c171c16fac5540e6cfb9c3f62afca98703219bb47a6082c073173f482353e61fb0dcef8fcce7ce9885683a0de00a1950507ba04962eda4239d8f7feab77f18e48cc042155411cd041cb1dfdad6e9d21f2834257f37c16a5075add2584b878e280df21cf8bcb9f795b98ced12900eb1eab14626f911d2d1a1baf0014de5c2381f2b3c808e90e2c9898d6494d5c6f38b7c1b9d608665561aead1ce1ab9efe987e033a6067aef805d32bc4eb51e301a7a81cef13db0a309be1092a8aa266f2e3ab23a535c665685d5b51a72a9d15f2fc99257ce11a83303f566db1466104105b28356d0faefc1aae2a1d4d64f394186086fae665163f8e3700b32acdd27dff0d5db6efeb9f93e74c38f6348128e0bdb3c68cf2c9f1b910604d50b3e0dc83491d7bfa6ea98e12e339398874742f55f4a7b2324d1cd11b9540ddb1c8df684ae58cee2732b51a38f5f11135e5ad0f434f0013f5b92ffb55ba686a09b1a91ad860f74e8c9c1bd679c498c4bb388393dac353cb20ac7ab2f619c623c6f88f9a36b288fc34712cd91995b7c995b2f6474912781a4c923f7245b9aedfe55f766540f75a6e8666437df3b062f648b7f119497c7aebc66be4760e412428e6eb5937751a5aadc2eb81e78bb26847d51874b2ee20e9716b86ca8cd99501bf58ee4d9dcd235381ac60707cecbdc800fc698f6b047f93e84d9876b247e9f7e36f9b011980f3301b63a5fde30ec52ea58e7ff73ec6a6afa829e5c018fe3cd089d91bb4ede788ed55dbe9fb429aaafd3289d7956d86075d31a44363bc720f1785edb5a57dbd7b2e098764f7e805c2881273bc0926639d77adcdf0a05386ea2c90f0533135a830e23cc199b47b089346cd9a90c69115c159de22c529d1ab0bda08b453208553da49eb8082e37b016d1ba1005f0bde9154e8c1e71fb06c4f52e56190577ccd9812b05d908b71fd23920bcee65ffdf779afb3226327d9202f5412500e7f4006f14149e6be0e7892bb602721f9a32a9b0f633deeb61f58913c6d0104d00872be2c075a2bea3d9a03419ab9a1fa220f92a599bf4f48bf9c0b7c0a34df0a97e02dadb468b35e6de28da1f1762dbd07af55d0115a4f7de781ab21f9e102cb9dfc3c85088f519d33aed4f2e35c475449024d2e12774556e3e9935927572d9f22fb8010c5aa871bbf498a7e60a47d0f46af943662c4300a5c4b1338eee89308a5c651c7fe8143e6123271f7ba813f6e063b411326d410737e13cb929442892daf515f0db3be4e7d1df853a38796d1c18d2c15691223820ef8e19f6fe60367d6b3436928fe39627fcfc1bf2e4bc447999894668118b69cc2012d3adc6e85b05b2d77c46d0c88940471920158e763353846d441cf0d8590346e753beab9c5a825fb9de8bfe6a5c5e19d51bd35fe5c806e992539d86c131c49f9e9c1c6cc3e9b7936ec9442fcfc323c68ca434bafb3922450afd128b7fcd321cc92a1d67481554b28df0e6c67ac8ac6f7e2e9b921bcd82a71b89b61711912cf4b02d779f45479bfa9d50d725eb9f881409121bc9c6ea34100924a804c44f328839b2aa5dcf0f0a9554075cf07c35a013a014d50204ad2af10835ffc718670625d147449bf56a679552c26940a1b840a78fcf9d0220dbcec8081a9bcac42524498282a4c16727a13a4ca3c136272bf1fea2d0b7313754f9d8dbeadfaa7acbcb3bd1dd55b79bb7f7e354728741bbcfb57a671f5cd9159e312a0220080234b66527b987d849212100be50aed50ca311839e949eb21442bb3e22c43705aaa26b60e702724ae1b65d6a2789a0219e15cafe974450be84a523bec68f922f17611b79e7691b6c41ecd164dd609496722eb3001f605067a33b1e121c5bd93f3fa3cee3f77b656d5c6c9aaf160b2a66ba2d0e65466ff06b87d816aab0d43ba03ab4018ed864cdf91c260ac4781f0d0a0cb830ce3e2cc7a7fc460e526f9de04d2de35b8df0fcb87d88fe762f655fa8475b70a58493e30ff79a46d2bb506492a9839474e2032664a318c5f687d67e6836c0d28ae2670a6e3cc7341b7c8186b285487a796245eb9ffe7ee899e8457569a2664368d7f6960746830091ab0ff141fb72bc12822db5d2eefe52c7bdd75b700d71bd43a6f2a254f0c0ad91c454f13f98cdbfa8183cea5e42dff58728309db7de525dc8b82f586bdbb77accbed93565626c38f2fc886957ff3bf79ee9b20f7f671577b85f2e0fb534d990cd9fced08e6ae2031476cac7ca158a68301881a23e06d6d0958c7f74f04701ddec09fb9dcc5c44f3892e4b6d9a1b3c5211a935b8a8e8282a35ea067652c48775696ff6f325dc8499fce515b8c64bd29e4ca47525e73eac53bc7039fabe69e82276a09114d8fed7ccc842d3940599a6004aa4db4cb3edbaed51885c358382e24fa034f4277e496416b0417a71208e65b600b08252af8d8061dced7c292ae96b311fcfa0e1f294ee4affa848edee5579dd39943aa1312dac76c1b0a66f7bfa475d3f696c0c50ec4466c4d2768d0c3431f4a412332d95985c28a4c0feaee5d330e61ffce15e20bd9c07c6be43350923aaccf39fd7aadddf684b079daeee330cd643db0a0de030f6d995434cd297cfd0450b38fd2dacd3b950253f71cfa5a509bf02b6c92d0db7bf0c12915abc4f0170ea797d1be04a5abd5973a3d9ea93189fc92454521
Because the extension build upon our powerful micro-templating system, you can completely change the look-and-feel and functionality of the dropdown menus. You can even control which pages they appear on with a few tweaks to the template!
This extension is bundled into all of our themes by default, so you can start using it straight away. It builds upon our powerful micro-templating system and gives you full control over how the search terms look and behave.
Our themes allow you to add a category list in a dropdown menu to the page header using theme settings.
-
In Zendesk Guide, click the Customize design icon (
) in the sidebar. -
Click Customize on the theme you want to edit.
-
Expand the Header elements section select a style from the Category list style setting dropdown list.
If you’d like to display a category dropdown outside of the page header, you can copy-and-paste the following category dropdown hook into your desired position:
{{#isnt settings.category_dropdown_style 'none'}}
<div data-element="template" data-template="category-dropdown"></div>
{{/isnt}}
Our Navigation extension allows you to create category lists and navigation structures if you’re looking to display multiple category dropdowns or all categories and sections in a more general layout. To achieve this, replace the default category dropdown hook in the header.hbs template:
{{~#isnt settings.category_dropdown_style 'none'}}
<div data-element="template" data-template="category-dropdown"></div>
{{/isnt~}}
With a Navigation extension hook and template:
{{~#isnt settings.category_dropdown_style 'none'}}
<div class="flex" data-element="navigation" data-template="multiple-category-dropdowns"></div>
<template id="tmpl-multiple-category-dropdowns">
...
</template>
{{/isnt~}}
Custom micro-templates
Each theme comes with a number of built-in styles that you can choose from using the Popular keywords style theme setting, but you can add additional styles to your theme by:
- Editing the micro-template of your chosen style on the
footer.hbstemplate. - Copying a style across from another theme if you purchased our Complete Package.
- Copying a style from our Pattern Library.
All popular search term micro-templates use the same keyword list defined in theme settings but can differ significantly in terms of their look-and-feel and behavior.
