The default template used by the Tabs extension is simple and responsive.
The default tabs template
View code bf3ea7c0019d65adb3a368a76607cfd2fe5295c8cfa25531d286ab049a32edbe8efcf069badb52d2f93407286ae0abcf50fc819de640111db1e7df52668f7337342819d142e3a791693a1bf68b30d663998ad1ff1a35352c9c3305603143468a32af0ef0f3c765760ed81aefdb4c1c62e8946e2f35e7e021c606bfdf7edb3e91ef7c0aedda9a3b6d1a365857353195c0b671109cd4fcf8db7b4090b245a11773f819e43afacc3495347550ec192e65a885081524e48c5dc4973453035d53896892d98a64dfa27c1e996da1e261f638d9573e596f84617bc8fad66f13200ff0cbdea36a57555cefadc08f54f6860725696335a935e73d9248d4b71ac2b1d6096def9845641e0faf9ac50052d369f8e6b727fbf2e61b0985ce06745843886dbf33aa1ab2bf6941223c35709af42d41053fc7692163d5a730cdb476abb27f62365057b2373ef228fc7d54bee6b608cfbf1496828047cafdd8b658b0b7b8b31a1f4149a43f305dfca1b67fb3cb3460d514ecf49c98b99750bb007f3572681f72c7f8f2ed7aa1064c60b3c0ecf0e8be991c282ca5532fc51d03fb002cdaac2da0c994b6c25acc231171d7d29ca86a9482145bab55c56cdd0a86e664c3fa1b2e7fe028c56746121a8f1c8f6fdcc9d81bc431d77c8aa646f200c8576668ff9c20efed6e5c2f32df6209816ee047811c2b2f6f365b66ff53e7a77b4fce54bfa9039cc6a74910e5052e51340b55459174f8653decaae088160a438a5c0a34e2b227a1b210127027b936c66e3e862562ea9b4b6560b6c74c596a3c81bf5157e78b2e2d1367cb1261fd22fca355f3c3575e084588667576cf4f278cc8750b978a44681bc841a1e41391ec01a418e71b60362cdd02c3e3e0065e6af0ad152518bad3db3d519041da5551a9ae7816bfad4af9e3625b4402b139d569999a4a6ee98c3b7a5847589eee51369b447e3e11b55e82f0b3a121ac5df224794625881a73f10abeb742e930d4a12d5f972a5020b28b0470c10e55caff1a9e71c34ce627761ba42af03cec591b8836201ac0323affce3db3a3d58d8812b99c824117934b0dadc09919ffd16821eb03c2682dec872b76025398fd76b8006b0cc04f8d7b5b145d7ea8ded323b3ebca6ddb14fb1d4324afd2d4f78e48e1a3162bc4a892b59384330a59e6187fc7692e12691ff50faf45fc19e9b0971408eebb3a4dddd3952edd57ff0ee3f4864645cacf8daea1a297241521ec74bd20112a5ec06d32e760aa9b2e0228f6de0a11084668a6b8f6fa1f9a29f2034e6ebb607c3126fa5c292bac72a6f9e2dda7843ba8c4db202c84ee5834e619ad4eb9a3529d1a7c8589fdfe7cec2e13169a1a47b5ead4fea578ecc56c38bfa1126619ea05559e7346620052f88fcfb9972901825dd95ca4f83fab754262dfe1f8eae5f7751e9ae50ba0551570f85f7def763d1b957c28fd7dcbc500fae0756ebb23d4a9da0138defa80eebeed398574915bd37a028cb333acec49ea69899a4a7183bdd6e7213d3bc4bb98cef09c4e2d691ff477d62a080399b05f978737de4db7b331b44e6880dee0c1ef2d6bcb842f553343cdf2d1800bb2bf1fb3974c63f8cd53a7ab561fe183b2a3c114587eb07b20b4e107fcd3546c4b0c547cfefca937bbecc370097196bfd4de5837b84cb2229ec7c7317c3cfeac993dc7d5497ef4e4c6574b3143401af02a777f47804526708c63e6d9da9c401761b045f7c495fbf1699c960f183be5181f2e0d056d9982d6ce716e9c271ac882b94218ac670c052cff145342537a54ec9192aadccf1f80644c385b1389b2e77a8fe9e3bae6cd497e7262057f7f3259d0e9577a92b4e871d6bda498622330bcb4373316bf87bbc3d7ca48d3ceba5e1222591b9ecc5750433a576d78fe53fbaa85c2f18b5425d4e677dfcd2f076a825bd132c7552646e4c24567ea32c8d24372f4e2deda888f2d89b6ab534f4a4f4432b9788b48f552b2b54ddd54285dc21323797f7ea89da2bf66eec630d4e631389eaf9bdb359f1f4e50a28eeb0769b14a868b412fe15e12ea5fec5543579a3a2df19e25525b0d9d5bffbe6321669df4104d99ae401366b21ec667a0b2a786d5aa6cd6cfa104db10a4436a9a1aa86b0496b6efba69ca9a83c106f8eb31fc0e599959de44c14602865004f35c9958f11d34a4dc85ec54d026b8512f624c9b1d66ff2f64294ddba953f0934853de39e55dac6bcf4aff2503cdada1ed82608c783c9a44c37f369b5b2d3ffa1312ff33a5b46661ef301df3e163bdc0aeff472f90be954a914584cb6e0f350812a40bca7aaddc3a1e8bad189d3ac3dd571345eef282c1fbac695c55a415ac7c6da4e492c9cda86d4f8a3c99ec6dfde79819f766701728347744113db2a1b8aa5ab40b62f2e8d8d10c05a1ed0a75af28cd3c3f551eb67ad228324c201e9bf575a502e75aea63ea9c5d142f8e1d9e16d760f4840d36baf079615b69d0fcb3d5c6ded2c2744c2d40d4c0783a09ff5d982d01a85d6ee43b33aa2baea497c7699f140b8648619fab8b3b5f52329fa3d1e00a55ef3703f7
Use .nav-justified on the list being converted to tabs to have tabs fill the available horizontal space. The following pattern demonstrates the fade effect using the .fade class as described on the Tabs extension page.
Large, justified tabs
View code 5ea08e16908560278a6853e0a4f621fd88ae6bd172ee9b38e41984e067531a0ed3fd5b74e742221aa7d2bc54e91267c0947f09a217b25437019f6df9c71a49bb1ae702f026680eb1878adb2f5bcea45c60bb859ffd955d172930570ef234de16f6a1e7657103c29b645aaad94db5d664c134fac929bd8ba349ed03ad5a387628ceec7e4432d1802929e5e732eb3d0f0709117c668b167a7a80e3401bd33764f2a93fc305ef738fe03014dc96a5a0e02c220cfa80b75ab8ca517a45cf72e32abb34a983a82bcafb8911547cfedadf5c66e474d9441ec9d778e231dbd95446f014481ca0be889e42dd1086d11ed51296dac99d19fe1eaac3e8d5e4ec7197da99d1db054bda2ad97096206c857d770c33d5fc2b6ed0cfa1dd2fd090800a36d226babc0919d7017a2ab41335248a70dc8a613d3b11adfb1721126c4a15d824c02f3240a679d23b26d5631b4b9d3e6095997b38c5f86fac60ff3f5ce7c732cc89e6269503adeeb2037bb899e398c5d8505988546a2267ae7b1a6549119ac184eac9aaf58f8e401bd8ed6d8562e83958807eb330f34fc676318b56a10cb40868576da5f0640c09724c556d4dbb14ec49d9bb2c41de269f848e3c5fd3ded009cc6dcc1a4c2407b5d44ffd28d907efa60423d86d0ff7b408fb7caca6b8245326b7e7635d8b992fb22e09458cd793559e53f644a953a0d09e8668ee7a77fdc7c0e3a08dc252a7ee29a6de2ee6a2113db38901861b6620a1bf793c070360f19bf9446a890575036d3d018369121d0af0860097691ce2ec1b6097cbfe6630b6b0325abe5f90f42e762caf249cfe72b70c24509189ca4064e94f598538ee995810714710e280859d7cdf3fff60402cdfb7647b8d5ee27437d3f7c7b6c4d889cfcb5bd38f691fdc194fb62efde671d610fe3c3a8064bb5815b2d7c660f731fb3067181d555e3ded4b5e38ef0bf9f3fb1dd33d5bbcbc4ddbe5aa7d70567fac98d906d565744a7ddee37b0c48a2cdadc3191653f09ad98ee167f79a12d24f2d7505834c969837d7cc4b01346a47cda7d82f0eb01b7c3e10c10eae8128b92bfc7208d4f893c294136a717acb56a12dde1622456d99257dccaf2c4265a4de174c5edb913b4ff40fe420774cd178bf1bf42079c85f0c240a5bab59918e026685f6ed53d90e00a3b8d24c2d8ca856150bca0b1de47eab2f15c01aa826adbda7706ad432553e1ff4531f6f2b13150cf2edaf19cfd6051002a6c4c418b2bd83dc040573631e1eabe7321a90fd03843ea01a176ed31b1ebcbe8e356370a0b2fa4b59bab92913f87c26707a2e18f59ec08162a9b86a8e6ce4c5beb17037fc9c8f77d9b9d33bbedbe25b7bf3458d00792703aba8d5e8be4b7a505a8d70f44292d27abb83313721c5c5c9cdeeb6f27d6fe2ff62253dc7324abf6211ca9851771e3a2d02e4b25b13cb936f7e0d7e99d223f6f3bb78a68c169497c82712eb7aaebe131f4f7446d25e5a508952538c4fbcd26a242308ebdd7e9e8602b61e57455e4a6e91c8c311dae391bfb2e2b164491b7f5debabf3933b6f58f62ba7a73a46b8cdaec939ad4210083d12f9681d88a69e96c489879d4fb698b0ea2df318913ab5b4b033afa29d2c06aa99b66943d5fa7ee40562a0bcd823915e1eb4b92da63178e2a28e816706876ffecd117bc353ab62d96e54edcb1f0fed1d6a16c37252d6118bba13794429d4b28114972e4a7b0bd18debc00128a02decfcf0fd9265acf490e96e642a35fe19206e3063251f14aca1558505b40fe2cb8682c1406957005b089cb2bfa6a0c1f60caf899689e116afb8dbc795c3f7f5cfe9e3898a398e8ea3c632c18ab78213fbb89834a5680affcf7bae5692df46d349f1f61b38a6a7d13e587cdd41b7226d29e27fa7dff825a79a02315cfb3cb312464aae69de09a8cfd607ddf8f41dbc373b943a507e25dded40bd194f7885b10b49d35958e00a33ded67500f423cd8fd93710e2b36aa8d983a764ec29b58e2f400c0b589ddaa99ee8e4d49bb76e40089cdd40b0bf87a4a55a5aaf8887cb73fae2eb4111e441904116aeca670fcd683bf9420b8ca3c893d19c20084fca3e97dceef06173d5583aeb42a82a5b628a8ca6b79580a6bfe665a03e59033ae33121dbc9eaf6e3dc798e298665d7b54692c1988b931a7f9e8c9d82560cb1429eccb4c63f35ddfeba5a77a32af1a91f495236c93e2286ef09ec0a27c66ad73e0307202d7bcd8277206af712ccaa72a840fb83ae9e008ff740d9f44b3b3716c89dcec31884762715c52d2033336a45fd95d41535153de9205cfeafeae2605448451f1f5251b3931e05b823727539e5d63c623d612621eac40c414dcd7fcc00bb5f00bbc156877774f091c95270747a98a4bd6361bcdf4b7d63f0caaf73e8a0751b35d7e96357c24caebede093eecd60c6496812e8819f5577dd9d0dcfe0e4b822a7b4f4dd0470177ae42a1dcb61693f24aaf6792c85bac25fbb0210b27d1a41d35a63f8395f1c11c30043169ca4a2b864e34db89160928eccd91ce297bdbb3d44ee02935304601d78f41169f
In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).
Large, justified tabs with icons
View code 8561e98e033c68e231c97ec4353849e2defb240ad8cdea135a54ac392b4c4d0bb560497fde03f9afc0ef974ffd0caa4034ab64a1430fb82e94cf1df37a8c58f4cfabd36ea0a6bf7972b1c73c5bb01be3a7d055c63047c4b36a3da8edab233d309ebaabe85f77ff7ec4cd100f6e4e27a2b467db3c1cc2a7bb8a2656369f4389aa9d23d1f2745b2441c721753bd550a1fcd60ad0d32398e69bedf7579c38113b345cb6c8688597682b4709bb75c7d8c889107f4b357f30f4eb5937945b0f98c122789e1e6765b2296e7ea02e219fc7958b7caccbb4638c6686c99b3efd0c5a38d84449e42ebbc747924f298eec03d0bf169554f68ffc42357d46db1328521cbb86259d7320c10462702da91e6638313974fe48fa756f2e0fb819d875798dd522dcac3977c8bd0a5657379f4e7f7aeaca5b6ba15a2ec3ab31d1ccc35c650b85ba09bd8354f309cffa3aae44de46788b3732157d46502020314ed3c131a809a32c4977766cbabf50f60998c25e4563e233c7708194eca8858ae97cb71e6a643250c59c16587f31d5ff20f1329e7c01de34c14d67cfcacf57a2de750cecd0e7feefc9e25afa1e9eba46ce6e4b15147e78edf7fecbb776e684b7623c798e108286616dbd7b7813f2efabae731d7d052a35303bf0438885b003f6301068eadd623e01dcee4070c60a70cfa07e9536b5ed578fe9e1d655846b4396cf50de644f308f653194c4a1323878a8fe9739a78feafda283e542acc76c222b04a6d6fb36f8b7ddd29499f6c683f1dea1cc3b798f2eb344b2b546f6c1432558744ba2c14fedd3c835f2cfd47e9779e137408272f1d3b6b82523d4c24ad605e1a567bbd7ec661d424e605e58d189df107adf258b980e8cc7970c267e5e9bd9719a68cfcf7d3f905a4608679a62b8bd11137ebbb1b566b52d7f0f07e9c8f360e5facab860885f51efe2d6bbd0e596b7bf3b5f1f58dfb69f406dfa2e1f4567fa162dfc117250256db0620171bfd3ecb2694ba2b98f889bf1fafc93a8602567bc86de445bbf4288b90dc771656d6a2a7cceb483aa96198462efe60da1e01f1384db8c8c319a735e8cd9c67bb11d81ba8211c59c1e2757e785d924e6041a92c13d167ad6de7b2dc412101a9081284560d2395ef31ea6ecc77cdd4b2d895f0a9f33221754d697d5bc69a7855ef46819942e91bcc9bd1ce4a76a42f943a6ee2f1ef5ea9120c4e113aa6f65a8a49ac65fb41bf3fbc50b12d2e67533526cee6a10943eb028da96d914cac1db5ddda3859521d8f234f23e8ff822cdeeab26edba1e1ea68b50056aed50dd437ca4be0d355409737adcc5e1dd09b1fb8a614633425ff1f5cd518eb791855f8553c3a950ce29b64b53af2f8d9d3a23738a84cec61ac1384410160c600813d4410981f7ebd6d7ba84fc972ddef3b2d4b453b298199b805a60d0ebabac32d9b8c5067b83b622eaa0cf5936c0c57bbb4d77f61fc035778a96f445247a2ebd85321145cbaea32fe25073aab90eb7e6853104d0061a20e7acf7dc15b37f800854c8de469d9e2b56950bd7a8df751b0d28c89d25d8567558dcc24c94f6c06c1c504a91ffd8cef58d046e1477fc8d8c420f516d3119cf34e4ce78cb6a75fcab4f4454f332c1433957e879cf91d39cd45dfd84e4cfcb9e9da8e7e8f58ba76146dfe388b915aa63cd4da83351a845880f00044399bdcaaaf3141b381e9dd487b27d72a9fd6032a890b3d58ead287d9b1bc57e584ab2e219f89e770fde52921b0619413fe9de79c0cc287af16701a951bfd0fdf75639a197c4c0a57cc8ed11a94bdc68b19e1fe53c94f13eaa26297afa49dfbd7630f4ef1bcb2504f311ddbbc75afeec694148e31b87b27d16a1fae5a15838c3f3e7054c1e8515a84eeb111dfe80bc971ab1b295839191550ee719b2c55f1150441ce75535297b7537561f86dc435d39711a5205e0e35259e113cfac813723fe403c4b2c03aff1695ca4659c497f5793ba71665dfdb27c0e821d0aca256a76b4e09e68b6e8e61fcab38f8ade4d6e8e5c2a64aab606ef5966ad450b5814f1ef85b8c328989605f3eb5a888d4d67c79851006c7ea7d79b08db0f34090acacd77daecc7840f19b6969aa41234bee01317a9d7fdab6a5281b91a01ec4e0d3a3b8b73d8355ee1d59b777ab990541551f46c4f133d902a8edfeecf5d20acfddb569bec5530ac4d3d565389023b94544d31f56dd43ab8cba47dbcaf98bb66cecbfdeabcf829412836c86f61f8e7fe824f1c7814f7813244fe2718eb3f02c27dde3d9733350c239c3a50e84952257ecc994cdd9ab0823005e2c087633ced6460552410be38593a9332e6c55dc8614530ba75a05a653758a290d95c68d620ded6cd3f3e7bb34fef08e8e227af1d75fd516db705ce84224d3773bd848bccc4e909b435939a0751621245a2499f4cb0b14bf5855e07ca9c888cbfda77b8819e0897c85ee3bb0273949442a7848b69c56c92da71b73a8cb440b01ef176cea151a23c9ccba9d1800b5ad8aed583c234423508808b21a51457c63eec46812cc4947363f4f2385f16c4dc5d59d066c352c8d3745d7c4e4287aa327161627967e99246c05fb302e3cfa45ce2daa0a5d2c4e4a114a05acaf95c7447e1785386049ad2d6027bda0fd3d7470c62e357d0dafba25f524da7587a50297c9a0b8bab29eb881295f0acd934f25e5bcbe9b974d640625fdc20cb90c1fc7427fde1eea8ebff8529fc8407e960364ceaecc23db4ffafcdcd591594cb09cd7fdd77cef44331204aba60102a20dc824097882eb46e1119036f1d704fd93538c88bcd64e18e1fff554e4eacea93f8b6ba48ff516f5d430d039291f0a297d1b92195b88a7d9e0269af973c64639c671207471f36162107d2282292ef865072d1e04b70ae02b644c30402992471e1ba0e31f7f408e0fd86e3973de58e55dc54e06a654a95341dca4edeacf6e19e78e5ab3d948975d0c690a9f5b1d74c8c4b5c574d36dc4abfb0a4ba7cb35e32551576617e4c3b2b57105dd865f9beee9c78647a2f227dba930b8f837b58b7c8b7247e1c3954fbe7943333d94b3bde2a639d19c2cb0e6267b8e21f23d9e4da6fbfe2100c8b9e43f627f2e36425ecf3b0e466a51c30642b9149c946bde12d73150071198d63a26891b973bf1a78e93197c2e44a3c1b2c27c83e7bfaf7c0eeb1d38a8156a4d5b9d39014a3a048f3ed7fb9b483042cca9542c32123272b84391a4505723ec7ec69a736f38985168bc854dd557378889e807e00026b95338f832ef2e2be8f3e3024e155d01adbfac4fb0035e472484d1d4cb3d810553507d562518c7659bb47e2209fd6b524fdf8d7874974310e5567689b857f2d7783db3ca2cb7de6028c6ed8b3c06130387b6bb68c20536b42a9df011a9c2f0bcba4fd396bf9abcbcd3c78ee77e6719962df3de33a0b1a241d66bbb2691eb5188da1e1166ab6b381d7bf81ea83e3eea9d8b21d55d55828be25d73d78f97df6dfbd593c0c732cce64232fa135c4412e613b2de0d0aa348519e57d33cd4ca02bbccf524a0bef9a4a41c26f39c12bd27307cda38cd53ebb73c815361c8e99cb3bd79739ed63820d27c5f9683acc02cfe21d1cf44e0766602d99fa782ecc19dc85cbe93992c6cdbda16a14acd93a4edd222e5763197356b35f0586c737b2f2026a6970aba19bcb89aeb403f350bc902c767503c789cb682e9f2704adb4399ae417592b508655850c5fcfae95ecaeb2218124faa4603151bdb34ec558148b283a27962b3e374add05bd9f39bd31250c847475b7f40bba284d7941c6ab7c217c3ccfb37123c804b8132108d061cc81a467d62acd3846c4f6436933bf0a66507972760efd625688e4ea9e304b540a44b4c977fec58e609940dafbb34fc8cbedc5197a786331de74387e623e906ea7bb4574eee4be32c726e3a488275589d1172709d0e31722386a4c31bc492393b06a5653aba4b714334ba9cfdeb99a89b6e8b4bd12fa4ca5a89235ca83f4a55306291cec763d9fc9ed2293ce7497cf741006a61f5430d170db620be4911899538be535062b1a5b90cba3f519c3ebf4d952f55fb26748f9b7c9500b5d4e233fd8e81b362b494f30a84183b54f7984169cd3599df3f3cab76eb45d48dbcbe6ef4aa6e3efaa4932cf55026310cb5741abc9c82ae41e2410197045fb81391441d8bb034c709e7d8496bfb7f44ae6a7049e7df36a744705a92fb939e23bd960561a1e6df5fbe132119fedab34dc9c4222d96749cf80894ae3bdb7ebd8fc5d99e7e1dba6df0f03d737aad4341c5ca736b9656576ea87d395c831947f1624b6a004e54132d780e4f7be6e88089a9690df5901448f019507e96a6d2932bcc62e66981dd28996e9b65d5181d64d8b0b3859da4f75e382e96f7c1ef1664221b487a5c4ff5216afda0c7ace9a0f345eee47ada4d4e7cbbd10ffd10e151b5bd81dc21c27c1b751df555a45b423b394823ec8e525d74829aee6ec7a35947eaa61ff20f411e737a90c33188186e6f6d3a5a726d96202618570e5a978f2163a35cfc5a1e2b190f8f7875f66d126fa05e781a80ce1490141940a06c278278cbe27d80ee0dd44813a40a775c3fe367215be9a272b3f5172718a0598b03b5634d05716ae7e39661964a4f16f4029991af09b028d9afb6fbc33f360157aa308b9abcf47873d1a5352274fdd149fd29f560cfa6ba0b488172a487b83275f86deadc26f8e8fe10caa74a48cdd1b608fcb6456637d43a3c95dac1adadefd486fd8c6a32f7102769331f0bca067bbd2c3edf7a0fcf7f500afb4c6d9ce9e66cf68ff3b811cf958813001d484daac4b6c5bd1181c3e9b76ef4fab53525c690011d860c50fea698cd83a267307e2e2f7b2f4243fdbb1cf8a4a972925ef6fa6dc86a23fe55b0622ddaad26490186afb240c79b8d0bbb4a21017c73e47801eadfc09546c66ffa94fdf48bba68e2c6c45b67de5c660139979a0b4f6a6fe29badbf2d9bd5f1d3a4cfacfd567192c883cdfa8863b707bda68c50775224131642457d49aec5d143f17d4b04acceb23d2faa2cbe6a60b41805deb49c18b43797ea55017bbdbdc7225fcc5a82109fad3c2d3057ee59ad667fefaeef222d4b3ecc71324c74b0cd3b4e584bd152002e10c73f732d55e4af9f89c95e2037866e4825bd9178ed6a4bce9b679c1c12817937147ad9b5212043549cb244f8ee2c8f78eb514b190f58e55f6e5decfc5e2fa7b5ab56be85e1f76ad063ac137ff6f8ccb790c552db2a6c635819dda7aec7ce4e29d2c16d731c24aba3f548404301a5c47f9bcbdafe0295f3e256f9cebae3df39bb3cd660d12693a211cf4afca6e573aeba9af81731140b7ce89d581f7c122043d632481ec6211cd675c50510f24151931a04d984fdbd447dff8723d18215892827ac723188c284e99e31a10e3f9e1353195954c4874442a3b4b96deba0d9db056c89739c95d9f21a7aeb4d9794a71b76f1bf20ef766ffc0b2fd0c656646d5e1d94ecd38414b094c1ec05b05fea873c70e9fa1d86eae6bca49e5d840db08791118f60489173b5942141bb8faaa4083aa73d1c3a13296c9123e688596ef7c9c1eb780c2800ce108eb58997ae618a3cde47cb35c104d332579722fca93c617ddca3de3e9faafa32c82f6a66e16d6c232f6150ab49062784a39297fb18d99abb38ffb4e1f698d13172779ed9f3c397b4796c8380cbbcc6d168a897d123c7e04306ac35714b80985932ed8a10fc744e3e066e96356a06c45334b247011b9e6b4cbc446cc1730989f338114f45291349390e80d00a5fa4c4a5165511c360b1dd5986b4d7342013673c58979b5e9c5e1e7eca1187ab7b5bb4077643305c37a7058f6942bdea2579db263291e1c0db7abc16505a1706985d52633a93fbf720ac3fe889d6cb3d4dec85cca65341a0d3fa25cbeb2ba1907e636fd068356d8d02df204bc972810393aeea1ad9496d7ecb9df1c27a7ca73e4b465b66bf32f96cee35e0a52086c72291d26c036f0ef030cf8f5eb3edb4483b4cb4c3cadbd1374154545a5d5316df4644bdf2dd784701f869f67e6d2c773115cc34fde4b3e14a24058d19c7af61f7191245c47e2f8eea0b941bad98b965c6154a25060d04556b655dac13d3da3ff0f4fd1473464f6d087ad2aa762013a4f84d51199b7a92233b968cfab29d55446a0d0e8da288d4c794c7b27950ecf1e5a4ea629de0f0f5691c369d0e958c32f2828ea90223074444f23e4b62168b25d545d95fbc68f3600343ca1b5e776ce72c9307bb6dfefc3e9624340e87a0497c34a5f90fb9cdfe7b5ae92663b13ba07c89bb93f28c595beb32b6b6cc7cdc46972fda6d59333b27c9f64f32edd3b3745db9748f20be458c0238afd4342fd3884167764431847e94a91fef75371f3780246b387ff80247748602e29204b5b5846e03b095c372145d2690643b2f75439b3e8a9a55cc8cc5fd84160eae4fe778745b1e3509830b0633f216d5498ddd40d39092f43d291b728d8b256b84a2d91f208f3670d3b0709a476da8e46d3f4b304302051846ccd1d119372a9d719a257ca99da4ff3d874ee5e6f563dc63a56cd73180d48e0fe46f40167e9e6caefeef649f3f717a5a7ed7e2cd48982891f9f5cfcc97188416cb4cb83af19436eacb72fe98c378c8fd5034a234248389f2a71b7559cf214df554709cc93fc2e5780bd5337e9f5d5621b432d1a8c416d7358a09ef52d8638c075d1006d88a91f579e4383eef61c0d2a6ca2f7c99506c1b9348631d7e04e42fba9e52c964ad9eeca86d9db11fd953e63b150f5bea155a48d924f816d71b06fadb47cf20142e505127c8ac259cf8d6feff3ce292b4576ff75595ec1d3cd0518a8d048459257a46c8aa753efbca8a2de1aa7676e25ba86ae55152fcf807b1ca1558f95f69043ce8aa07e09c47280a0b7e94a37b29a22189216b4bc3a289661be6910a3f52e93175c0fb3196414c0cd67b4e03217a44a2c0572ac13e126363bffa1e40a03b6d89c16fdf021b276bf5f1e280e1705015ed774a0e05b7fdc1f8e26729f8f50823a8c9ac954210b36990b539d2096ade1d5696643458ae4fa0dc77115d9d4a7f79307aa7e186a430f371f4be185c47a61326b5e269c224d438d07e8a7a84c9a45f1dd4039348f5811e1ff2546386106fbf7aea300e324a61c17c719901e670a7ca961603f326f7da10beefed788932e96ed074cf0d4b1c398b6128b3e514435cb9c9908dbc94254a086ed535cbf8d9bb7f53d3310d2cd9a6f59b9612200e31b0d0733b9d64d1b9646edb5230147fd99a9608f27bf01d001c1a24b0d636f99748bc814b32f60cae3b2d4627dd386f3e94ae2ba5aa4b9a2642f9e6fef808476ea1c34eaad4a87e2fdebea4333665e2d9482c64a78cad839940d685a51479feb2c9d0b88d3f152c3e2404d3335ea8a4d950d31d47d7d0693c2f3f80dec9b96cf4a8a26c4cdbfcfdb37079c2bab2c1c967f1aa265ff035307e7d69224ca367f6cbabd49bc48a8a783b17e5a84513bc91ac59f828b8e9c2a67e5bfb2ab116f610e17deb1f1e2129fcce7c8230e9dd386673ab035a664ed06ba2f6885b33e49a476c341e2eaaaf8284ef5c7f5a94691dc47e9cc4a072ba9daeef749b3a1e7cc6cbcb743a81b7b8d9d210d2f0494c45dcd2e20f6988d7b0fa69dddb438a65d0adb69dea8315209fb1508942516fb893438f1e997bd1d98914556884088458326aec3adc89ed01f859cb2d8d43c12d95b84feb4be3565e850367e1b5167624244eb3a40edc417a8bbc64556e0cfa0336fe16662fe47d790f167de9d46705c9c2443d9c219b34642dc634ca18f1b83af8b4b1a342b69a2f781ad8346efbe63a37475f03fd7f171b948d62eb2495f3eb63d3e8db02113ed7f286cd50642476239ade02f62a519fae80419d447d2ebaf55fff6687fe01f5dbdc46bc1d3a69d0ce580423fdcd7d1e505460f01665d4a1c5d9c2204060cf121aafc568ecdf42b2a3e342770e49c1ed04af5456db3cdabafc62c3b3f4ef5204ee5962f7d07f82333574954cb12e324b04682972d48a083a5aff22cfd6b1df9b43f1428101541453d7f66d5cb7d4b8ddb492e5158a8a68882d9170822133001aa8f855437f49a92dd142b3f4e631573a826df31cf1a8e3604e0a9d521bde5285973c6b77142435334a0d3b4cae1449fe504d1af5da9eff1d8245520fdfa7ea4f86d9b85b63010cdc8079e2f700a70153df2dca5389f8e05d58b151d8eeba874067958ab6b84d7e01bc2a33a2cb85db6cdc27bd05b06b39af8a97a16ba8d29393bd35e5fad964d8907dc113c3e70f20eade17f5063f02d9d7e26b0319537f47c50bc0e11f42a56dba015698cba6b1f5f16dbd0fea255b5669b3fa327b7207db61672f246f3b86487be3aea2e75a790d6029ae8a4c8ac472c52da97aaaed5b4c781b0452d278f31fb771017ff4e4ac4b9735e29a5c9c0069db1ae323b436a1cd3ce6595b23196e6b2276c1ec4d2d6dacc7f512bb90e617e16fc49bebdb153b72d94bd9d84cd655c614a594b125883cc7a361774fc12865fc169eb3f47fadb9af73c4bb308dd29a2de45b21bb7e9976e0bc8bbf42124c0d82add880bb285e694ee0f83f7c84f30eec2073d86872e2673805432873bb5cd9b53b00d685a723532881bfcbd6aad7169ea47bd4a500f40dfb321e913a8fe04c1e750d5990df3f4246cb31e25e8bd2ecc437d974901608c14977a44d38c81bd7f50d39e13a0b44e32eb246219ab54c36b365475e10b2bca575f3d20cfcadd3da0fbde70956b4d32deaebc05dff3646b45ee8f2704a76f20a9f872f6770f5e511e2c234762ad3a592117780082b7bc4b716b760ac98cc6107c2c525e503c60447aaaf9e1992f582612ed096da1ec8c3de288ac3886368e4e6d405b8e9821b5244b7f254996205f17d2d7a4756e454b4cd1006777b1f347d4ace5a000e0cc392876ffcbed4489a55acc0098dceb1c60a6bebe064345bf5d7ef9ff79797a2b9fa01eb533ba2abf29206cdacb01b1c59a190f06f9ada8d0f10747cf50e6062b6fd6cc224ee861ba3455ab05d11d7e195caec6299c5e91ba5fffabb37ffba4825791aa17645acaa15732211ebfd1fc9366baadfe85889d16bcca63abfc7e8090e00a5e6c203ad71699aff36bb588669ea1fc6e9cb14a49281d915cccfff384ffa057c4ddd7b2c656948f01be7460c4f858816dc86d4bd6f6ebb5f765251706b791a449b1253f38dedf0ee667c6dd44d66a22a69fa560ba5a9c2cb70ff22dfe83d78da4cea610ca5e1c6e98ca0b98fa18307c62b57018e74e63a2fb7393260300fe2dd262c78d311cab8ec4eff3097ac8c71458016b9580d41e2b442c5f4399713098ff7182cac7ab9a1059767fb9f3ffce36258b7bcc9bf059e587ff1052126d09107bf62a39ca86e962c143e9e01db9b259f6b064ce4f4900bc27a10f61532a7e32c7e31ddfa79c30bbb517e903fce942acde89ec5244e91f029533e6fddd05d268f852b016475145a7218ffd6ecdd810eab0337366ec2bfdc5c18251c5df2b3b294b96c0b28661104f47ba731cabe86d8c058b9e70797c36c09b88e04a6d5cb28549fca04c8d45c0b883907404a63d7e8db57f64aaada0e53a3953fd3d01f28c82b0d608e345c91340519d8fda343bf06fa396134491079e75b71788926f705c430b3a1dcff315ad60dab4d3e9ac333495bbbf5fc6d5b851501f5ed917b247cf5037d42bdcd698bf87c63860ecca132291abb51a718109dc1df98bb715e0d6e6ab584958250632bfcdee9ce5ff32858fcc12397bf6dcf24925a5d879bd5277bb74a75709b0df531b06cc8c05731c4d4eebc48dbe35233cf3e425dd7e98786224194c7420f7ad84d5db08420f2180a624c1f40417ccaa4b36c8346eb631908c6ffebd0bce1220251375044b464361935bdc52c05f20460c02207734f49877020d875b41c49af4641173dbd22ec3cc704dc865d49563c391bbd2a2d86e58a34ced8b97e9ca05c4f5fa76346898dd57c8f8b4d742f0c9601712f86625d47e0b4480980fb0dca7d2b5fdd33355ccc30d3b7ef925e4ccb2eb7219f3dacd82f77bcdbbe4f38f6bba55adf4ac2546d511f29efb485dfabd3cf78e0673eca2cf79598785f902221d74fe0729411d88
Tabs don’t even need to look like traditional tabs. The following pattern shows tabs using a different pill-style navigation.
Tabs using a pill-style navigation
View code 7ae06bd4bc9a8d9b4f4734a38dd8f3d9693f367699cb6c0859336f98de905c94833cface441fa688c2f6fc43175e22fba5d300dc2c0ffc891f1942fb0c0057c48cfd56d3bfd00cfed34de221d6f096dbe6829185ffdc63f6d35cf63de0faa77b39f80d4dd3e21b97ab97f4dabeed6b1376ca2d0bd5e3b3b11e29b6850aef6815784f64478017c4593c4a26ae1877f0f67680e6ed5630d15d66941d27a4f0c055defd85e030c0813368046cf8b424f43f6b6e80078425ef9973f8b5a96fd83eb22848a4f9cbc8339fdae9a7435a6c2a173363649ed75d906a008f1af7a2d989b6407694fbc88544d6cf34ae2c7c9c420b883d19595d9b09652bb42407f7c1f39b14b1847b73156ca6a33ac6c50d9f138251f1efc6268bad7300fe7aa89d3ddb25dda6ae6ec17e6f688f91bec7101d6bef4fd0766816394b7aa763f8717ab56f566153f2d53f3d131d73966aa6791c31b4823cb1be2727ea7621cfa3b48d7120111dc02c2a0b03acba2a5ae6ec8f4732be1760a0c43a97bb0254af53eea54f9c1c80729374d6ba3b90f0a8612163d06d6f1fd200e1c1b75e7db40ce676e3932f568d34b1da3426fa9aff7f914b34fc993dc9079eca33524388f0248b4221dff4b33a2d3ea23c992496e5c242a0a5e7282a6a58bd31caee97b88a73e12d7dfb92439db8955bd1bc77ed6075afb5fcb8124e513ad2d00f8a560517272d4adbf3fbedda1c2e3605852250e4cd1d984ad68f0f4c3f4b8e1e3f7e109599d782a64c24b5063e126fbfc2ba673a7d261767ffc34c06588c69f38ec88eafc4565637a90445e9ffd5118b193236672b4ab8b33fc4a7a7f04cf052b5531995c119b6691b6f5847d0dc5184d809d90967320c83327056ccd8d1c268880d0dc1a598557a2d1d7fa2bc8e9d90408d6a2ef27feb38e116358587ce7a258f985e04331658499cd00990ac0daf702ba2758325e71e4b1379f78a23908cf3e2c1cb54158d48fc4f87ad9a65ef05419af59574375aa847db060e7999118c0e5631922f2675ad06e4d194344f7f0d887306fddda427fd1c652087c6e54282cb61e3f6eb1c49626ad33091d03df6017691117a449fde7dff868df5a20dd264d57d6100aa9422f6c1807d8ae06f2c426d3ad621b12a15984d5eae4a795f9d04eda4ff1aedfd05cab79bc689602efdfc0eac1ff5756a11c5badbbac4f38079a6a872e56e5c1997a6b1c2f3ceeeb8790bbb140319dbe94b512f710a4f1fcdc2b028de690e3213d41d7036d98521367ea332fd09298edc95191407e9e67f69b4643b6651b81ca83ed75364674a5e8713fd4e3d1f7a100d1641c2ca2b7ce11b084575fa9af94a84999fe167753170589de8a533cba4505b30bb9dec0f9186730e2407a737d133653ad35560b81de18fb87e94c6bcee8886b7585e7c8f95254b34b9f9db8da00cbee6c258232be1148f8ef8fdb0698848c3f65a02b04b244be95d90b174857e2a8848f1330e2794aae082136c5fe7fa756ed4f4b4257e96ca5f537e63860d3ace6e595dcab18be43e3dcc6c1c55547d15e30fa8da284c9445ef8f3d6f2a8c5d845323003b44d4db9501e54d40e9c9b47ec3439ce81b2a66787937e00a883228470fd31c992bc8daf3692e07f666c378dec5d62588c72eaa2bc64e14b28bdf1418a193459ff42a4476985537fb3902fd5c3a4c20e6bedee4da17294d6c9153f74e78f88b95148ae042af62d9e9a7471c9b4d1b911a40a8379e5d7710583c702df5173f5e693b6e308e7e40379d64cce43a4acb3922b9cf1de0c8849501d849570a0ccc48a6b5dc8c18de500cddaa4525da7b25c0f6ae7153ecf57ae2e80c328e763d317b6b8989b4f19b42deefc20719737ff6fb28af46194c08b91eb9d724dee7c3db3c95dd2722c6305c312205004ee160ed198a4c9360487c776d91f42e64478339e8fb356418449c8253fbca93f9cc1108f12272dc9742f8ed40c0f4126a01f4043b1a3552ee43657ada0cb5bbe9cd301686f0df51deb97880e4fcbad17a749ec63459f1154669e348b3ac914b4287b501ed7f0f53cab0b9b3a9f84b52d746d4fe21744f00009835e2622db50ba162d3e133d0c84e54b6c07559d6d9baf6ca4347ce43947726228b7cb674cf581b445ca993a893f2f0b96aeb437016520429fe52dcc26cacedcdf89a9bb45b147845e52a967e5561700aa67caedfc09bf8db68d90f894305c99fffe010fb302d23c05a09050a612d73e0d3f75b5dd1ebf3548dc2cbb7552855ab0c7b38f2fcfd559cdfe331483c0708f5963abcc5b759fd8d72e05fbdf6d3f6f09110ae4d0497d4b0e9146fc19f98746be6719225929ce51dcaeea209c587af68602189c833ccde64f21e2fe3408b1a077f8a58cfbda21f22d90cf063968a740f273e78ddfb2a909b2deeec6edb441e7a6227541811a5c2c22de6a62880677b475919394b8e376641cc44bcc48cfd70870631412ec888b0026d9f17f2b42111b762d892db2d58e8f1be52a0d058f66e
Tabs patterns are custom micro-templates that you can use with our Tabs extension. To have them applied when you create tabs within your article content, simply copy-and-paste the code into the bottom of your Article page template (article_page.hbs).
To learn how to actually create tabs within your article content, refer to the Tabs extension page.
