The default template used by the Tabs extension is simple and responsive.
The default tabs template
View code 4459b6dba3812e800ebaca89e83d8f26871c0511a42ccd66febf908d93e1c1c6bd7095672e5423ab47276073597f8bb12c6bdbee17b118af37bc9b7d7e08ca661746ddda56b24a46e38d47f2774b4d5e2bde558445503646e7aa1df0ade0dcce5ac326886539ec8547d25ac150bb72b9048f527dfbb60efe2cda51b3f56f7d150cea46f643bee3ce8f09826fcd69bb4fd2d93a0368e93dd5927007d85044763796ae8849085c316799efae46c4e46883b4319dd209263982e5c8e11a4c1d635e1c34ba609e5e0da6fd52716fa3873efdad087699d1f27da5c7371e67ec9087c01ffa3f8f3e337d3289b7703a4310e26d4231ffffeea7184c766ac4d454c21f3061c8fd41ed408edd70d60fea4bbb3dd7d2e65481684fdfd357a69ec9b0659902ca279fac33dd09351407dcde0a58d4c4986f3c1cbfa9b3ebb45f3dbd47db0211f440a26a908eb3799aabd8700940e31e4d1ca38071a4cb51485b0e08f34a00d233e555007e26f953067f68d53bd38d7e76a034e63f216cdbe2694abf262d0dde141bd552b463a46b019428bc55a81ca7ca948bd4ff2cfedb0e9bdcb853a37ec8d08b27d1927fdcdab882b8b12214aee99b07cfe70e13398b1b20585ca47e0dfe093bd1ee9af4c77005c246483e9b71fe110faff3fd67565d36f227eadbaeeb43d4f86d2efa41df51d77c3d99467cd72eeb2b06387ffd42258fcc731af8c92d441fcb7821b54d1eba4d921032dadf73105d6968649f1fa66e734fdea6addce19ae6b6b49c62594034ef097bffe1517bf070176047cae520be49f12cf9552ad782cb2153bbea463dd82fedff66a024ff71489174d9f6aab141ffda682285c555927c6dd2d0b2364f7264220ac5ba2f560c4a369f9d74a63e5d171688860a3fb3ba7c3a4d0fda4df573f6e05454a8be40b4d43e4910c2c54a32fb7fbfc612a0cde28c1ba5b4c2fd615f22556615b655375cff73c403ef8adee0574f99462a061dad7c63999908f0a6d11d4c1246cf6ccaff87ed8a37ad2d670028a93da52986ee64542de5704331874bd17b4bb948a897a3fc25f76f73850af810a8c657055a787cf568f7eb949cf83f85df8c427f8f1751c0aeada20b24e3d89738022983f0fc518d49a3af17eac1be81eb3d75da65287f3815d2398a0d1bca1fce76f75409bd1374acea58e73e4742dfebd8f03ef53a0aa18ca5c1a304f72cc7ef96ee946cbeb92b0ad6866e5fcd781ee2096fa8256122a5562738aba46beb6a05efacdad29ad78e308579f1f82deeaca342752cb780f5bd4ade518f69d27466aa7610f8a1732c6bd44384e705777e2912e12022eb1a24a40d01e5f47a88e953368b31702a8e886d17cc91ab866701389a46bb9eb0f0e0032539ec7cb3b9484ae042be62583d27b6aaf39939f09bd98a4d07347f6b760fb770325a5e47eb3815be413908b15c30b4973eba00adf259a70e6f21de0df4f37599cf551ee90840a2461c4b4592db27af3aace158c885a61e7f58219dfe6582304c02515b6cb976c772daa5e692bf04f8546887e99e0596b876115bf5277a4e392385d325eea170f4bf8ec906ff82540657e603f58b4a22eece2b4507b575f477e2e70afe25969c1ae95c37ff1c53290ef4c97476c11a30027a6f7b335fcf444beaf2792ca834dc8947f846ffe49f73402f84b35fd9fbd72899922934e7e046f22b6f2fb8d1c510f15db024e50f049763e59e145ffafc813e71a7543a02cf3ee256c68eb849efc67299577326dc1172ce335e597cf4f9d1bd10309ff872347c409a07ac61418c662bfc1a4c51b087b7615c00017508db2c7813af09190a6f5a865d1e0d4c8bf0fc9f51ad62ecf5bf42219df9bc2c1f0fe374175b188cb5a2f8874a5eb4bb8b5ca1b20d4ef2735144e3cd5bfd7f59d0e8b1bc30debb042098534948b97443680989ca78f096c9d9f6b4430d881d413c95aeafa9126d20cb96b2947c45598dc23b88d1130097e20aeb76e40d105b9ac45ba7718b913fb8d4eaba00b69d998ba59931f9dc0b38f735f2bae03bc6c2b7bfdcfaac1ee56cecf0fa6e98a7fc2d565f3623747870a99bc066ff274c21826d3f54394bc4013936f175cd815402c6a70a670f464e9b460c0b886a563cc5d8049b697dbfeeca75981dcc71d9407d29548044a63ae94b4b1e5ab1715fd9b3e7d2b3069f5013a6f4ca77e869b49c8c2f41941853dbc42e3913fe54d13607d6a9447a22097c3c7da2d40147412c62024fb21b3ef816d2e1fa663b9649101ccb30382bbd8aa1a3cf4ea645624af3500e0e32ee0a0e29ccc6cefb33d35727e3d34663b7ceea291455daa64b5c6156a3e6cf4b8180c655664ff01af0b20168bce0fea0ae3282757230d07f46d8f80135e1650ddbb12472aad95025127b02adc0ac1b56082dfb92ec356f06a367d8d8d233f9789a7dc07a8e5789ef08abfd6347251db662856dcc14e946cc3ff7a250ac1e683004bb7858fc7866b4d6c71387857d18e0e00cc9561760b27929ce2d13682f79f98345be3ec838a3fd593c81b83a877f4c2b74d6b1a0759dcea64d6d
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 c4aa0628f3dbec47d6594d02d2fcf95dede233bfdc31932cc77f5d7a4dd8d68ece9a8cf9ad093eb8522eddc4efe7304016fa22e3875487a89a85ed461855e766f8fb182d15b12f5490ebb16bad842e79ded09c491419aa9108ac000dfcbf925b149b7b2b02adb8caeca96b780a07f811fcb4d87b421598e9bb75a5193b1cd841db82b6f68fb7090f4d5ddd0556ed2e1408443747f7496daef3fa95177e637feb0f1642e421f39dbb9621b3a2dc800346638fb8ae253554599002815b7a9a06b22113fabf50bed92999e3ec0b33aa73ddf5f7555f19a57dc16eff498efaf3ecf79ab2773c57a8cc0fa3941ed0834747d148ada2dde94814c049a2b82b6b1215e87e3f295fdffd9222b59ff0b089e4a42cf25ec1ad68256cbdbdfe3366a910db743ffc27ad9a21502944f48acdf056731df07f36d20a2915a958dbd000f47c493fd61851ec8e4f648acf05268d274fde9918b316ff399b504024cd14e1421f930f81d53c841240c2e308ea40965c48fe4a09efb89a6fcca133e314b0d6a0e9031279ac77ce337c22b0a217eb0df9faf4bb5ed599f3861ccc979b7af524aec3916c089e194ac72c01efea1320e7640ff5e526d4a334dde62764d7465f6416e6c4058d2f409ec4ecde587c98d91d6670cec1eb7557101a9abe736f1b06b2aa4dfc6136120d5b4c71ed64755e72dc8da0856fecaa0c0a980ed60a7682ed9518b7a63efaaf0aed3acb2b38be68ab11f9d5f1794f33efcb677a77ad7c3bd6f41dfed05fed7b3c96a77acc8e6d170da7c52e6c3f940c11f027b8de482ee9cb06c921f45639c3c46afc1c559d2765a57039d8abb845e9d9e83b70b8fd47856304995c8a8d0d7745eeb4395c1e526a3842b673cc254fbbfbae05dc16826af9ffba6f9ce7c09a30e66c4b1234daddbc37ef07d2daf9db5c82fa2b476165a4fe132097f2f572baf7c6548a2654e55fa765a01e030421d737c1764b68ab24a419bfaa633c0cc4f3bf5ce8ac6bd9b5cf54fd98c829b3db5601b840adb943e6c415673254f4f677063604d2d78934b17fbc480a166b63d6c2a4604c7ea3d47b574f18f10a3d58991790df194995cb7bce1c25696df45f37a0933e60901d67d7a80a8c84ba4dd88d26ff81c5f13fcbb41a8dcfed3e45cb8b30b543422c82a20dc5c935a2ae552edf975c83e1680b6136a8716985ae804cbf2dbdb36736b36d68bdc9284ccb5b28f6f3251ba4289a1722f0ced0f7265c5be1ab80ea9b46d2262ee6a2bba1c6f921550d054546e6eafcd5a37cbc6be0eba08c71275dee50b5664b812335397f42d8bb2474317795fe8646f36eb0c8d61ad0022e8c08bdc99b2d7a3f90a451353578122f2a547cfe16ac753bd2234c22bfb77b6d5abdf26cfa8b1d4da9ec354981411922a4d2c55eee31c72084ce0b2fd5e934dc58bfe8ba4b55d2a15def01f6cd580e6496d407ba564ca142f0f491fcf5361f71b2089588506a121cb85b7098b16440e913019ba4345edf7c2cca7af58240afa48414fe1aa3137b5503651598679b380a9577921b48daaa375e585047685e99b0a4d7b6ebb2a49d5dd55e289e34b40486e8df4f02f0076eacc69b5a337556887bc6a56cb7a85f4a938267e0aee8ac7a3cb32eff8d0a49d84ecb436c62abfa859285e9931852ba1976a6ae474c110c4da1da196870e0538af08e8e384425314d7bef50d61b504c17ed210d1cf2540d0240437f207f4cbec1f764a3f3ef4b95717b3a2ce55e3e00990ae7924e02d289e6880807d5de2c76721900d86b506a8eb5935d8179aba33ebf10ff8152dd3eb4a7952ad474c69c8f88e76335101425dd1b39de2bfd1f61594298f2d633dd6c1d7481d56142a092220d61db4c6bdfae7d723801b4653c87766367962dbf04b54ab3f7adc86e7202d69b74c416fbc8308fe1778fa3c3db10893a0996ba40bed9c7cd3f8d243fe96250cd1e92ce312a54dcef9269918ff4189e242683a07a0084df9434262c7083ef999a38551e10384bd0d43d5e825cffdea058cd8480bc19ac64258fc70b3d95506e4456902678219bfbad621120dc6cd230cfbe3369f303817b84bd7b4654e3e9cc92d0f02cc1ea2e463608565fe03fe155cec49d99697d265eb0bf5ec165fdc3d25148728f903b7c77ef5304abae0f4c9e627d9425ae9ba04c26bcf83753fe89599bbcc8714684af00f47044aa17cb80508e9be057ce93e9604433b42a02b495201132e75b1c69f92cb85dfa1e1045919d392ff2424521e6dd6c8fa5a3a1815782fd61def236d28856fb09133d0aac19a6d374e7985a6125b140c31cd24f53ce2d2a1e3dda68df961245ce0788f1a623116781512d27ee94f38c64d19a921a9a790b0265c4ef0dc3c31292c56c377025ef285abda10fcece559130ef73232250e60ce0f0059569520b1b8ce1161556a29bd31ef86eda87668f56bff8ffcc70e90b94d5e8a04a28e2c7f932bf7a30c219789a11fa1cb11f4edf053c83eec82b0cbf0480be53d1084db5b586357126d0444aee284582a1b34184b657ec3a1b5b5a572b262aa05cdedfc8a3
In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).
Large, justified tabs with icons
View code 63650d9fae4a67fe07b859dd183f655c367d5d5d304d06000c5b20c4e3bd689a8d267d1adc118e3913b328ac9928535df9ef0a79653d7c8a3f030a637e46d9d822050859c6ef144bcb5cebf48832499ec66003ea65d44da3ed67d7c8f2f4df616f93e54466daed7a9ae7a0b462ae9c75f82c6df2453ea1e1bb4aac74991add6bd9ae5d60fa1b9dca11f689ddb4baf1a74294d25ee70cd4995d70dfc6402200749df62c6ae6d5cf35e86add91fe41ab62e88f5d6083f6db3203b63c0cb9ccae907a1a8ea4cc3686f4a9ce711b1c5596c9df14ec07d1e5a3ea9716c24b9615acaedf0354f541a4d6cf68e26a8894db1d06132b24f24a3cdbbc14bb805bf2b579fa95144ed47ccd9003bdc40f4831e5dcaab8d5df73ecc5dadb7b40b1e2c15b8076c01d50e45008a729ce7cdadf33c880557650f7073dafcee3f5f78ca4cec7b6a1c75ff1a2bc65a14e9de2c616ef62cc4e0ae277da705149fd7be38a0e6de0e4e0127526af8b2f3f695505e94b3b651cb55d932bace798d47e43192bc6a94abde3f733d4f879733588bcb63bbfa5b583b432144c443166f55387ff4764542f340f16bcc4261e57e35a2e336d0c00f426fff682d907808f0734be2c203697ffce46470466f7a9fca76285321a8269dbc6bcb580c83e68d124a8709fe12c5ed0c30fbabd8493b0e3325883492e5973b9e6431075d35807828b6b3601570bfbbbdd2ef9973d9e91c64abf06301ddda5497a33b2fce6db6be9769d8291ee0e4c4a452761e1d7faeaad7c146acd8f986312b479e041e5d9f4ab729c5e7fd4474a28044376c4f1bea063e9aa868c6a930ed90c1af0cbb96f160b1d53e91cb8b902482940fe4a0cb2b14980f0d164d5817d0c4b4846cbdb7f8f28ab916c28fbe49f38130b5b0c4794cb44226884ed4f38142b24273cb99b99cbf940f8b3aac854d96d3663f1c59b3806e4d2fbfd91d3ad616b4b25e2845dafd037fa5b0962318c37926627cd3311f17e6da7f96ee8f688378bc7a1ad87626cd28706184cba8673501ec1ff44a89923abae201b92fe5319bc662fb52166f7da02bf906d19e9077830a256fa9078950b4d22b52688a41c27bc6c864e0ce87595a24411bd1fbd84d2958d1a0f5c91ecc4b6e07a967a4a442f6fb82c8d5dcc2edc37c8a29327d1ef80c8aa92f7485e2cfa64271a35716605b998a9bebdf30f2f5ef23bc1b3cda5f4e0b80599b961530588637c4b76f06e5e043cc1a016b23950299a1e2c500e469eec369e2bf5444079676315dc8636d54917c358e5f737205dd142a92f128bb6ee16c759a2b72608503ad898d18ffb8a114491adfb197115c95127a6e1ce7a2d24dc2061731a11213ea4f53cf62cad1ddbcc3698bf337c6908ffbef53e4306df158f534d0c071955b00c5ae91630052b410c672ab61209a23efe48cf299e31143ceee0f746e17c7568b59003aac36a708b526bcbb5f14fa40429b13c16933c50b6b3b64cdac6ef4ba7d474e1e534953dd9b7e50faec61a6bc7cc78f7f67f3363bf276d1628ee57f9212909c9fecf630c43ef11e0ee16db7997b3689c7438cf78931097a6a4155cd9567787b62cbff916bcc1fbab2b9e215bddda471020e82e055f30421840e302f5023ecae10ef2d8f02ba1f841ef630dd4625a120463c3dab70cf6a791a4cff2a2ce7abf5251c7f58b7b7e6b25290af24c93a407c7332895aeb8341dd6583ff4ec1d816160ebdb7e86b2c0a18e0892b853669b8ba9cead57c6d2a0725a07afe5fca7c0992ca519fe830e5b320966f50e85b5b7f2e99862810204a3a9c44f2ac0f9fa200390f3b85b47dbd12b7e516310c8ae11031a6558a84d8380252faf6926774606abfc5a3a30e97cb997823fe64fda41837e49548726f1ad89a9ba4c3f597c148fdba3aa74daad6d796ea4a62ca47317649c79a14e6b56cd7b0579d126ca1b51c3ec7333f6e1d942dec1c87c188fb256fe69cad03978cbfe136c9897249eda9a20ce590ed25fb80e47d5c07c0bdd644479e5a4885019ba030ebcd6256fa919dcf04d2446c77ab899972033986da1ad8bb539d87095d29cb012a972dd308f0a4fbb93b67453121976f6cfcbf5d6cfae6c0a5e0ba2cf6a7f1c8f7107b073e7a38a0ea135cb607be60fe5b14aceec4be981d2031624a63996a8033d879518f9f154bdecc1c66bd221599fb1fdfb6fbf3a16c3b34908c0ac6a0f57d1a27c4f21aec926a4c7c6d09e93e53107fa48a4763a69a6034ea652f4040769f62c2d44e639f727f2caa84822da712c7811e516ed54d8c88e95e5c4270b22046ff1e46aa5feb00dc55696ec09b01dcb4e75f7e2c132ff9a6d1b1e582c4bae2b55f01120954b85b28d8be33296f4efefe398f2b6cf2ab527d60e10d1a0ecad9127ab5d4e97b3ee85780e668d99361f02df920428d95622d6a1d2d8a50ad6c1b4246d2aaeffab2e9642766b08b08fc7b17b555e68c505490a3f40c15fca5644b6dde1dfc07df60d2d2c5dfc1c54891f865e82ed1386df04da205223fc8e7cf85d7041c16c4313657b33207bb76ccbdfd1b56001966e11d8d078336c428553cf4ccc202c1f74668af7399490dd2194d55664af2c40d19fcb98b56f3c250972fb77ed861c40c75f10643ea696eab5239754a3c435aaf3582eb9212ea1ecfada8d22a53340f6bdb1416e7d0b389ad15e80dc4ae1c798c81774d43e3e6f8cbd8ba942ce4fe3c2a76925a397b06e04d450482f91b20525c58937ada194d7b01f7775837c721f773e97378ac37c0d50e771472e67ca3d006044bdc777591615b6e7fe6c046afb22861423e06805c4d3dd7580c7678bf3cc6ec047b5cda762e2f288643bd5d21ca15b8eb0e65670ee26a9c8eed73671159fec96eb80b08432624e76b3c1ea0572973d6b51f90299adf92b638d125bfe2012c191c92fdcffd77b859eb2aa60881c5080f27b8bf270b3335658eec1f6e42eb1c09a5e79cd6ccff7dba7d4ebed239612b854c25586a7b56cd5f5ab6971ec275be83cfe80933cfb43beb64160f03262065920263d1f31759deb55e8d6e3a12b89aa493fb5b726df42700f5282a472a30dd0a28101db00c7a23482a58814907d44131f3f43eddd8d8e2c8a1593ad6d0586d8234415e36ccb87a74c6042b514efc5eeb667cca165f61bee65df23c70011b19c5bbcf5c97cb7eafe3fd2936496eee70f8d86800aebebdf4452b07b02c6f2f9f44845ed5e2c4897696db105b31c9d6d1b021cad5bac39c591cf5a2689ebb45c2c9fe3eba7403b162f043cbc921b4d982964ab12fe789642e1e0cd6fa72a7e53aa0d985fa5a7cf0f43a61019a9a55e1e3c8a2f41bc612b508074ae3feaa8db57a251be21ace3101853c8c8f1aeeb78e4d015eb96f9a94e47b130012fa4577adddbc42f455bb2a1ade0539dd82cbb38cdea81bcf270c3b0490cc573dfa1f0b1f92a2d3f75247d541aefc75706e1a193d808ffc76854d98bda2e359e51dbd755d6710abfd67a34fc1828789730d41ea9a062bca0c730613d40e223d6b4c4e6c20b303d490db84a64f20f75de543385e03232b85477ec2673a094468b359b686b3a09b9d8e315ffd27d0b2e306fdb87ca9b8cc26d6120d89b6ad768776572ba51f71da328f374d40d8a30eae2845dff6725f393f69a55fa8dfe3939704103e52519c745c54bacc84c4adaf7e8e20022054d12a19274e345696abb2ae40b3b080fa4f620e0abc0d550115736159fbb3f415f0677f2fbd299ed596bb60436d5a94cfb15be53f3f7656351ca0c021ecd95a9e18308f750d4bef000e17eed87aa06b8314630b9aefc77244bb2efc2bb0816610b4f6cc8a038e2f96b71a38cfe772f890027ab533d0214bc2ed6cf9fcb0efd167f65236af534c413c5ae6f899005f3cfafe74a8e760bfea3ca34097c0cabbd7783b441d7ceab66b180c48e2b7257558c0be6a650e25448b2c4c6ebfddf336e4d7a8e718d08cf749418f4a9c015f0c3ca2ec64b0149ca7514e79cdd08a7a88d35ee0840d379370b119a59e17c5aa7a86fece80397e87d840c7963d8fa89e2bf4144fecbd264fa1cf0869d2e7fcb7ed8318a11d7467f599c4463e944407bbad86326de93d1cba9f4c99ba05c9ba43e7a6a0ab5db3bf69da48a69794dc1621cf01ce9f6e3205225d82315a09cccb9e609ad615c1362902cd53ef99f8e750d0ca9517965e87d970e167dfaafeb69788a1ee4be14a3a2393a875efe7a892e12e423792413243636e867eef5d0783f8bd637451fc6160a463fd67f54fce4dc904bb5a98fd0a6e952088ba8fbc0384ca7a17813d2882e7052a29aa0403a4ebd72dcee44ba5b04e4243b6f4da1339067c6f3748f23bf3caf84d7872f17aa69353d22970adf581df02b0690611a9aad0f3336cf4959e6e81f2862f91801b87ca1abe972740d38641272935f3cccd8031241652890c894f1419f64f00d50c506708bd3ed836652e129d4d8cda7a96b6c5d5268de3f6b62e5fbc7bf551dd653307b2b5ccaf153fb1f67c82d6dc7e0d769dd98411e3f232f673cca0dbbe99ee65761ad7d5721c5525d1e943866a6bcabb96665f0138e48691b006af91c8fa762c831532fbac8d80f6b7e0e7f4ce401bb4d63f9056c4d2b188ead8bc8109b9195cbd6671097c22c3168b61917e976c1ff914b833b8d8196932b59c874ac3124e9a2a178aa0e560bdd4b1b01414a53740d8d5c648521d0141c0dd9c43ac53eac8a1cc1476ba22b0f4ac8a20d178b72defd335a4f51c8c10983a8f72285b199c405a25ed4a835e6fcec6ca053436bca18619190b198a687564e4134ab13fd4d4bf5bd787bf63a6e9bea27ecd5807c2f46a4043acc830368a747c42ef09bd291fa6d61946c1d3d95dcdb55cfa26d009be4937b777a15605d4e860f1b7eab27ca7ff2a1c0bb77462ebaa42cec7f8cdff11179e9df9220228bb6a0e4acbd6473e8d7f964733542d5cea8d9f93c20bfde745f2ff3adacc0fdbd062b15d7a91c3835a0a3d66342eda6065a875fb5a2804b1c7f274866ce8b65c96b309e4d3b8f5b244a7264483a02ce9eca6bc0c97848e7eda65908aefea7aca09649e8523822ae6d8396e2fd92ec9d237d7b391d46efed9d0314af7a4b5ac2ffbb5b4379ddc339d124ac092dbf44a3c4f3d56893ff2403061d93e9ababfb483312701b9e910690d52075e2e7581bc65f3d9402bfdd70c874947b9116b25907405dbc459028a7e147c74cc6309080aedc491f656df17cf2aa408b5d4c47923bfbffc46320c2f2da2e0749c496bc815030a3d56021c37bd7cd9dff227bb55aebb73771699c343214d2a651e21e28f24656fe336ea17434020bc76341adf5ce1e3f6bfb3e1d586bf6721e1645b679296639f24d2335703d2184d05731c465ad7de4be0d05dfb2b0fd9ccaed01c9c70f58a3741163a43b3a90f5aabbae5b74bbf52a1fd6632f3d0deb2af9a6384a26bbda8264a94fefd37370ebd5f0854ec835d4862e6fbd64944ffcca877ba68aee89cb7a385623f64e1a6f5953c75d2b530c3c8e5ec7d6b7c2360b2e94e2d7ae1bafb8b1282390dad9702cf76a14519b8bba41c75c9605a247b14b53b68abdc62f31d69871f1db1b72407c10594211164dc360cc8dd705edea9955b0970a1d5622134c3c9e0cecb085ff2049fcd7ea30e8baecd37e03a535ea18f1d2882509db27bc0f010c9d406f70f826191ae2a0055094fb15c9482dfa5ad9e7e165dbecfd28de48aa32096b09ea5a93c1b9328e06aec4db6c2e3f743da719dac9e4f49871cfa6922f98fc3c348d7b0f0d8d70419ff6dff8fbcbc52e4b1d997ade7a608251723272937481def2bb78d9eb21311bbfb84ee2d28f66369bd3c5d3bedccd3388ce864afabdbb399345677362e85f55f6a5e9c4c66bbc0d7012d30dadf80225792c6194ef237f74c61e6e86bf1116b084121653eaa8cbdd19a5e59314f798577000c2e6cef3f32c180844232d9c7b1f483ba039601b2ad1f51ed47d9d5d8bfa593d66c084a9cc558d64b87b1d06cb2cb6d2b835526e384fd2e9a6d6e97df0ea2b254f0b6b7991144c2b5439c871ba672d26de4ebc169d8572d6530d1b52a4d613ea8632649067e2e5871ff0fa3183e3e0387c8646afe46e50038aa99d4dd2234940231dd71766ce2ff5574ea4ea015da5feac0f6460889b83b9d441c72955ed19c2063f84368d57058e46454de493e24b35406825a1db21f6cfd929bf7b0b15e57ea2410f2202dd21b228271e84aab9d26458ca65e9ed10b4181a8daa381d7dcffdf150599a084c95537ee11c17912e3368c27cfaf4b896a9ded79734443fb5b917209f43f89fe9c1dc6f6d62297d5562ea1ead01cc7992e0c60f1db5cffc662fcb69ada4c393a6c4e9c1cc5b15363258f9385707d7fd271943d4285319bbb071ff4a7c43cf25aa3c56e2312a0baff3f13fe39abeec7904de37810a930da207418866f89f1483f1b6e8fb396145e764d40b9d03b86b161dfc441e7f028ea017ac4668c2d7a3315ea879948e39c4016f033bfa7d46651ccc60c19b4c3b67bdb1230cc63457c575de59f1c1bb9fcd87d2736f42e4f9b0375abcc269df77497f08135ef30565bfa11a1b5be16f56d9d716775ee2672f7410d3c72b17ebc38968b3b7284529d1422312c1fa3c1b25cec77f97cf9cf35c027108f0954da4107e5bd7da830ea1f15e35446b04c6ea1d5cce27d57e81d1ce0ccc542803ffe2f6975c39e506b927190e5a553c4c4e91e3717c12a2a47f0761a5559d9aae62bed9c565ec690b39e95ada7afe9890b7f696e014075f7f1ed0bbf626d733d804056cdb1deb82e78b703bd8e26dbe1722135cf60a92b159d911b13d9963307ba49d8f85a7a42a17bd6a81a4de240550fbdfaa1d89948006d0aca3ebb3abf687579dc579972d216edddcf8b35b39a4b3c943e4a6f9e14698f8080fffa978099cc8a2ced56b5462c197c74d6f2bbbbbad43682a1d68484dffa612b22f2eb5000617aa0b79e697176550029df50e6677f2c5c4e14cde2341e3254eb624d6fa54b48d24d715efe62a1675a6aa1afca2b7e89023c85786340a761bbe9639cb63fd820b6e5e4252653e401afdc4b871e9162e3614ac1413b337a54f3b87468a9391388bed0d278afc0e26a20b9ba67dfd4dea8e876cce72b91946542a6a07ec780d232bb0f4f0f6a3bf71fc6b3bb7dc640fc6f136b53ef843c96f065c4ac30953f62a52024ff15c3d24cde101606256a205e70663849b2e41e4fd2111fd6b00ca9056eb0df5eb35a9b62f82b3e6402e2e151db6811f00ffcb023fa3fb28b35e0d89e836647531721a4d579a97b2d2e42bddc97dd42736e637656e9f298f5966c6e657b50d5d46b2010b580f7b1d34e0f14cf96834cb0e064cb4855281920d7e7a863ee2529a2598ecb43436c2757b996a174a926b023d6e4afd80c5a1224a66c44a25a4945930009ba53c1f2e1023759f2d5f86b62a5d401955d1209901d5812da5508ec9e9a54d930d44c1abd31c037d3bc3ca670364a63045f7fa651ca835aaf554dd12469c29a5b5e7558860842a7f4e789980b8bbd02ef78428909d05f7da3b0e079a1703d88647bd2d493d8883c4b2a57428ce0856f2b0fc8b2ac84464233679bbc2343c810269066971002bec462b1bb88be35e6406260d6704f362a9253a65fe34c449f2cb71bca252cfb6082132016fd7c92dd5fd77b7ced3248e57b6ade0e3b2519bf5cedf26f9eebee846e8e7d05773961af0db687d34427f9f621ab330b1ee151c14d39a4db36edeabbe487563d6922d3c74d872a17f1addca8aca54bf7b8a437e3264f30cfc071c0602a303c4e2997f8e9b127594b83f1b8ec00a52cd5d45548d3d3abdd8bf03363160110ee83f26766f969bf4a93c6e5b8dfe7a262a79a3701c61b30d88bcabd21a7f49c3b7c1af7c7965cd52d4114ab812a728d59b7c315af1f251d55f550f46b57fb9915a57cc38ef2cac6ff5507a3e6754d13cb44cf360a89cc31ea731e7dbb462c7f54d4658416fd9eb035b8e114bd550599cdc68d635497b60e111af3c13702f69f6ffa52dc0c37c27587889d53399c8dbf9a5f5ebc0f499341a538b76916aeaf5a9309f8c70c5a9848c6ed6b1e61d03b062eba3fcbfb3d967ce6bb091777355a252ef12cbc5a233629ebeba8ec678859907bd6df96813707120520e9964ab5dcf36ed31f8d568a8326fff41be1e587f3c39bf85373edb0260edd6e6a0d934cd123544a2169b88411fb4859ec530ed7aeb09204c21178bbe9f92971a986aca9ef93a8b9e9c0a0fd56fbd053bb95914714ff3caebdfb3101eebe67d11eada405980cb7f996165a30f8b0a7cc3a7d98781a7b62e4fd6adedf04261091fff98e5e801960a69f6f6c3b1913f3fd62e43585f2ec1e68b92f0483db79c0d65a45301ddd5c1f6f7270f21a7054dea1eb9a720d482456d504dc2cea440ac37256e4c4b126b54085b4b580ed38f2111e9676c50d278b3a09db874b2b21463bf2c3442a87a6092312ad0dc8e783fd4fefa82e94c98a9e163430d5ccfd09f4c698c2460d9497179928ca6b9f747ae464aea73acebbf06771cf4cb78aad7109677527dd3dba52063210b7d0a8c8433d211b161e4612590ac49bd608bd4427651a6ef4e5f40adfc88d3424bc7ffbaa44eafbb7ca394d80274c0a151a12914e4264bf40c876917327ac41b010964197103c908989dafeb50781c4c8c80d3a913c10ef1f642f4098f894747668f814ab7e4e38fdad797e9af475318f65d73ecacbbf5b6ca5ef3d1770e1cff7a37188f908a454c113be8f751cd915b5c9bc741bda2b29952336c5ca535ff992fdc2fb55d54c88591892bec066d701ec3e9cf0357ff7fc8b39be51f7f5b9eb64e43778817f42f0546fed182b054ca0b9a925c153d73261e88dbb839b65d309b07d7d8870b84dc1e5a40644f2724d4ef2d3c76742475a5c8c2cefc5bbf7ce2d975a781f9d34b2886bd2586370240ccb2a2dad95cc0e7f16e31242bb19268d2bad3a6dee6d6f50461f3d1fcf6f9134c4835aa1d3cc5aa6a4ea7a998fce3ddc03cc9ad8a17d183366dd5fc1341483be626e0fa05bf8a0332fea57149e65e42262baf6d0ed6bacd6acc2ba5160f827715d7d9f0b3a9e2444ab9aa10a00dd1cf2b77c9282854581cd04919cc51daacf2954dffcf31e6f8d0795267ed39cb0b0e296f97afcb0d16b54dfdcfd9e7f17e5ae87d18a8c4665c691f1997f44529d7db36ca9b40c23b690a90c9965734b67e532f452e266eac29307004318846c13acadcbd8365a6fe290b1dd55cf1d7f7a38f0f8dae564d208b304b6ee7ad03b5a8ee5077458d75037b5b9e00fea9a184112443fdcf62127d2e9c9eada875cef20b60f2da4f651ae7c4f5af3c1fa052b980154466e5d6fc4b189bd0bba521b0ce3ab4674f3f857981a7eea5f46bfa8409a4647e3f91b49c4fc679ef7d85f583f244dc5089f80aaa633df76f56bb7b40c0e37d25059e001013cb1d351e4e556715e0b633830064576bc55bf193dbb6192c111c2845be8a64b5449af07e52da627525b2e5de4d02a75e6e334b13fd64addb5d60f087eb1d6a9cbe3f84e707e14a4a2128236da389c932a59dbd234806834c1a1b063c906a02e53a2f3ec1bad86fea1000448e5756fadda1a4f050a5ae6ec1c6aefb947f310ca3be5dda90c491e5acaa8fd39c6298721aecd1399f788cc9402aaeff86d46d2258d977a88a006288f1b17b26f68f0b21b4fc4394ad18a736e649053df41939493462e337e77d63a686b3e05e61c7676ee100108617063e707718a134f766055ccae9db9ebadfd73275392fabb1194e28bfc9b6b602f06f689cc6d2fc32641d595c3795aa7547f6191157509d6224206cd5e896a2d78c90ce201e3bda272d609e706417ca29319dfbfa43646808c38d711d6edb7488813c17be3ba6ef1cdd6880d6b71e5673833c8d3b840357f8897f227e3d2f66ac1217c9a2fffffb90954812520cf59a17dfa179d766ad99917caf46e9ab2022bf199fd35a5ed6f23c5311f71c643537070fe888b3a02fd43afe1a4dc94c92e4c97d3542c5b858342fb8e1138d11d3e846fcc5e1d52ab8ee547becf24be1f74c41f19216f7583b01a28feb61d45c9763996155f86278b5a17949b62192fbae0f594f573d
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 c7e554ff8aff2c49c6a87181d6fa20af0f789184d1478218a392485f4ef95f5e16559a976f3df48a1b7def9c20a86bc752827f549fecbee5239ba5b3f0d5fed498aef4bcbe3ba57a60f5540577aa45e50a129074c0ffdc8cdbe47a1701b08dd306917cccd982ca9eccefb39d86dcc1e8b2583671e6d8b560f67d6c70c51b76a71a046bb293e01b9cce36ac2f140f2dbc8019620f7202c3370f30ae268861685735c860292747803d4e6c57d1c197228c8271ad970308e899123f32c9f23928413f25947f8e2ab34d77aded95e9339bd47794778667bc9ee7e63e605f99f0fc99519c773e0fd495c6aa9de4f27fcecafe3d934f7057c3d02cf9baa0db785911bdc79c9aa9d346d0db7cea22dc8dc10a7ebcfcf15d4ad303dc620802f9b1fa3e81755e91b340ebf3f966ce9e9f44495f698c95ef5db0004ebe706eddeed9078344286ac1c784912a5deb388de9f499be723ef63152866a38d32e7beea6548dc32c7b01d3fda35d6030ca8ceade63ff0a7fe0bd9ff368e7e8ba0abc2d50518b74c93e577f40756e7139bb08513932004a1c743e006c523abf2deb9f4f156dde3fac49a764cbb5e4e08cf7b4c451a7d196d667c9017717f20a78696a856c9a02f029551a4e6dd18f2f69a4c4ef09c7603b3a64ac73492c96938be2bf4ed3ac93b424f6898c5e2c087129c29843d11bd1202d37705c13c63ee744334ebca24c39681f970f187a880c3fbbfbbaf32909ffdac77b36fbf275025557a17b512f981010c8a8d5ee2b0f9c0fd84777385bc58b0d5d039733c18e9153be1d6f214f3b35ad428fd636f4c5ab4bbd530fcff39b505ba810d1c55f6105d1ceee41391afe75a3c6be060c6b862b6e5e352d6f0f165791ff544a279027645abe2df8224c208893be3f8894153398b3dee645c8a07379608a542290aad26d7a86ef6b983c4a51d3e0295c7ad4a8685fe81e5f7cea276faa09b89bef98db750268451ffc8cd136c98370e8f5a5d2d89594c1f0b04ad1dd8e9fcaea812fca67ec1a209c9b0496426959a84c10a65b9f7bc036654f1e9c89f9058f8aa7e8295407d824f850f94b3a10bc8f95c64f082cd7da5406d05b08f5d7b92cc9c528052937d3d79366e0b9f76f291defea2bbebf5cc168bc851c72958622a19b4d988f4806a323f5901f5955a9304125c4e030eb974633f4d720ba784a0d28e490bac16de338779a2c88bac2c91a1ed367886b34d4db47ee8b70411999661365e24c0c04749044b61780d5d4f6c034d1dc214e234f7b439c2ff2f523dba29bdcdf09a226e1578a5d3f3405c4d5363f69b7457a2f21e57e8930132bba9926bcb65c10dc7602489ad95f7e12bd9ca8bf6ca0e7358129aaa966cc4745090290cfd8af52f73bde64cc36d69ffff4aad117d2b7c85c19d93e6242b2a2b71aa6d855ca1a1312a90ba2cb4df42bf9a65d261a67f4685cdc0fa21fd44ec50fccd3c7679df33029c38beef47c49ef38bce1067de723b8126e2c87a8148c12d92caf6f6964bd58a62e2c32245c732858ec69f381654890f3267cd0832a18915a08551f13c265a855c45e69278a482d2bd6e8e1c3fb787b1dcf85f43be3c115837b8e0440acebc8d16883a1c68dac6b77978f8981cc305e0e5c38026029febacdde5cbf5c68e236b2347b1e30d14f8d9c64b4a0411d8db85213f2f16cd3d852fb4b55970edecb9af1f0851d0c60af6a9d008c78e4002d1e7fe73634198c0ce26b6d8d07b4513065836d2dc06ad2bd7f03aafb190db4edcecbe301cfc6008f1e08df71ed299047da5801ec2727ad0e25f0384d1acd774026aebf641366c217f7c84b9e52b3a48a257e88ddeb184798c3b761a9031440fe1994a668de840a33844686463d6eb778935cb20b4caf1c9df4b2a78012c2bb39310cc0c066e707cfb80b53e4f0fb887d59b1825a6d68ea7f9c0d180017f61ad81fc5b547437a8cfbc07fe7fd46b4f358cd9ee0a4b23e8ecf64e7bb9b92b98a2a197b8287036c1821c70808651ce2979967ec96f14ca68c22aa331844f5ed2b05ca598fb399b37b341c308aed51fb1e351dd68916fd17c0e261ce54ebbbead7ecc13fa3496327e1ce093c0be4f05d8729ae522301c11f71e84f0de4061d0b7cc2800f152a348b81c6249389107cca71fbb1013a9c80a0aff56d6e1310f3803f2dbf0f06c74e427ce40b0e62a229b081fcad1f29ced636a860babe6d55b7a5720e1204316097ee7897d10d92d7015091b64dd5e12edfbdc6c47ab4cd5386f788209fe7e8f9a9dc46823fe90f4eb505e93226c8ffc54657ddbc8bc038fce552c9a18ddb19bce340a2496b4cc5dab9595a81180ee00d174ab1408341f0149fceb5a0765409fea6eaf37587e95abd467539726017cf3c8dbe925dac85ba1011958b957047c3cf8497c96b3afbba17deecad4f4181a259afef22ea149245f0f6b9c4cf3b1e32bde0f6c7dd2848062150fc92bb3ba7249dd5a44442a3ed9c08b3e0f42b9113452b20a8da0833bc9be9e2
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.
