Tabs

Use tabs to organize your article content in a way that makes it easy for your visitors to find what they're looking for.

The default template used by the Tabs extension is simple and responsive.

The default tabs template
View code
4368b1d0d3610f5343a47a0e66aee053b8ca672744c71170ec63f4d8c0a115d4c5149be1b0e01c6aae36f553e060d5f38f529e3ce430ef2f7ca880f2c4e8074a664dbb6b90dc1203eddb9d9c8de460dcd0988bf62d45a2fb8f9100b03f5a79bda887f1dd8d51a23111e6e1fe8ecd15cdcaa173533ebf329f5b7cec0b805ed596c1663af7954863352d619173b2cf65e64b121b9b65397b41ee11b7aecf0bdc643ac4cb6bc936e1981e85c436ce2a12837484fcc5107a433e3b7f8243c92d1b1e735e7c0f48ad6b6448c47dbd6f571c85cb497034c8370045699023e005c7ce3fb5f5b6af317daa2b9f693a9f93cdcb088d4c555a3570fe9c33916132939da98efb7851397512285a2e94c7b0cb1fc55a9cfb82983526b7ace6e99a005b781668eb3ffd4e4d4a73f9aeb72773068a0e6936f57b29f2ff9109027d9bef136c2d9c766413a6149f1dc278ab0c7ad5fb91fdec379e0f9e81661ccb4b6672c4753b9210c52a7d6eb9bdebc1d399c4f97c653433a806cc7b3df2a384273c39df3cf5bee731c6133ee9742842141ed743cca39481c650d394b4f6bea253a4a6309a7ce3917b901497b95dc8bfae8f04a4ddf542c100e00c6b1bff6e060c152976cdcedb5f512d515e99d6e078402b3d8faf16fbc5a4e06e31a944b0104247611f7dd4aa34553b38ebb08ac072093a5b2b43a3d52804d000bf80774e9df188a3d1cc70d61ce2cfa914ae1e6ac80e0ae41891ed3406d0cf4a3230edd0ca68c3ecb9ed62531532cd2802bf42472fd73f8c12f0d9dbec1583a276181883be06a84f623644fd126416e58650ef1d3ab1b1a43c524fc747baececc54255e4547ade6040e0cf66d3f916094dbb4be6e7e069251a05767e3469dc95d248f563ea73a334d4a46f78db312aff45c6f70b07c80cdc82e5893c2e12a31fffdbd4f947d089d9d3d1717a913979f19a5a3967a4611f16cec9502f6b9235f70666cf6b504f2855f2c6d44f1293a88bab2b4b95fcf23f4e8d69fe4e8edead053b02b81799956b45c854fb989d8c25216163a777a1b7c04e9d748bbdb393ed554fbc2e1ccfe8144f84770429f430b5e091ff10d58bdd09ac04cdae121ba7d37b11555c8e68cc98cd6223c6ed454adbc67ed6a463d4f2228ecac1ba224205aeff9ef8d9a9cb312f1dfda834a68a06a6efd6ac3c7beac61c222e5f4b378955337f4800f7d124112a2f56d27ca5eb036ba350e27e288390541f6fbda877a088167344d7db5367335dc8035c3f81fb1cdd9d59262a26b460679c9b6500305d8ad98f982fec868d836a3a2cd4f51a33071fd282f558ec580ce80e8de815d6d61c97a7013c2e78e532f235d80e0c22842ffe1bb302539ac22ec98db46eb702f07ec78ef9768ac2ec30e4a5d2903f7406b610762bfe4fde856284091adec2633f96130f0c1a4a3499530d9e1bf4831872f5fc746e9d1263ba57f130d975b1b2a762d302ef4dbf2c50f2774771c78561ad2c701c186c5ab0eaeb9ac2d347bd3e8a0a4a78e60a4a3435be2f97cfd0054722d930d958ebe2ea64097c785a909ce1df18f9039fcd22c2aefcd5e8fd8aef12c303a792957ca7a04994868bcd1c5165b885cbe8a812f4ce87f119f75a627c6f3145db205aa2f5b4e31056ace7e8b738fcf928c4c3347ce50a9af79260f9b816798ae7e4b0b9f7ffafe4ddb1ff9c8329be2b049a5376ed81fb090910464dc31161def78bd8b48b4c51db55f677e6ce50d6773d0e04fb9a99fde5c41e860dfe95783caf222c8dd40b662cd4df7aa9584667819c68c7f3a20c3d1dc94d814d955609cdd9264e82fbf705646a4d167c8e883a9f75a217d38476022347f7a8d21ddb967d75cebf01ea0176d651534f0c1543ae1e28beec3c145d5fce7af2f0ee5ba154573cc6315142366169f553beba0f548779ab71249046fa6654d82d54d5f6ed478eef5858757915f29ff354e859c37d846cc1307598005c588e2629ad7257b3f192584f8dfad15ad5afcef398e744b3542b4d729b1800adff37b07e4afac8ffc9f041ae497dfd1fe1799655ac98949d909dd12788a37a31f0394a0c6f2e4ee0718152b2d58e2a1514cff5a9de36c166d037df362d3f1f0320680eade58903ed97f3007143182fdce8131918dd14b1776573fade985fd40f7281c1f2a71369ec8fb9b41c6dc31d846b3ddd290374b67a4bf6121d5f300000e427a80e68ee01540ab6761b0e17067f06ee0daf5ba0185dea743df0237c746e0bc1c5e501a3ea440d72866bb3f9d0a0b4ccf4abfcfe950b5685ebcc11d26581ef1d85c8f73367cd1df99cc643c9ba233342bb5bdb457fb198aa319acf87f6af0db0916226ab88f490db055b6835bad5da12afb282fe76be8e86e39b332a28f21bbfa348e7d83a591a3c59438ebcd177ab560b66a883e8600c42e68fdbee28488d52d6440d3bae8e7d737b600cc52a4276a6e045ec0deac91c444d7e3af1dc10e52e6e3cef90b7694ca6a11a16e34fe7169e13dae50d605607d4968d4f910bfd6c6e1e18ddbebd6ef1e25520bec538615c7dbb4f36a6d702

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
766e7d6e9fe71cbbefbdf5e3a7c902bc513f8d3fc65afcaf5d2b6a735aac9cecbfffce22e742611685d9e890b946c56e9931135c2243bddc480a0f85049cdb03b2ec8e55f6eedd4c6f89b5a6fb5a50c12993487f15348efe2a0480ebc10597d943f37802981c25bc3546f346176893b164489c3869e48a7781e61ed8d7410f4854b1c5582a143e6c7eb3606d72c1db5287f7c1c3436795b454c595a2b2f5f08cb33e5f8a0274460260eb23fdc7cd6923a7a447f09d4b75c572685a803f219941fdbe27bddc10fc98ecacc07cc812e623c417917fe95fc59230f5c0ab58222ba2b3012d593404c01a8b4c6e240843125346ee96df1375290c34da898369dbe71e7ec0933c66f653ea9652fade4fcc97552a15e2681dc9341a0112aa2460f47194760b1829a24fdd1cfcf369d62c9b79aa2a01ee6894e0a59208cbd39a54792fb0a2c7a65b39310c3112ce733d2e4323758d87b74b2237738b1081a591a6c4160b1b87222ea7a167aaeb32294b5f279e68753aab256b00601816ebe099c1a6b246d61607d5939ac6cc9177b8e7370ab7298fcb999684ac0a71cc2d5d4e90228dcb96f20d34bca955512ab25c3200c1ed2525cac64be8d376c11d435ab1e7173e7285b502445a98d7074af692e163d9fb906a2011941a7e67166742f74d9d216c7bcf4240643fc38d413b3aed13a8abbf6bef038304c7b86342c40c8641483900aabb93611ff85ce0985635bb6b87136c4898c78de27a9381a91b0f6d91c3c9cbf38b00f368fef846f3995528bbfac7400a40922427d2c67098e2bd26c1de7f617ff7cc78b6fe20e8bd084de823353870419fd8f0ee7452c657301e53a7da2582c858fca175532b6fbc837ae9d69cd0a7faafb0ca815b9fd7a4eb7aeef330acc66cc12ac5643d959a7f6286832798dba4359376870eb0f95e32b2b5bfc663997b5c94a5aa092a1437cb88613afde8a9905e6a297fc8c3a343216967cf80d55e23c75acc23f2653f7567e72113369715b0757f2b69f9210c1d0174ad36944f35312d570bcc6f5aa59b001b18596bc7202a5c00ff0592e9bf9bb9f439471d075cd8d04b67652f1646bf9d011c7f6c8d754bcf375f5b6247c76b8dadc8eb75f7292a9a00f8ef1cc6a26889b681287595d97af06dc193fe9cabd4386497816dd9bc0fa8f1e89daec7519a538635cad5a2d2ad3cfacd1edbc77df0cc0dcdcbc720c894d3b9a4614d1c65ae2429c0f4baa1ace3981ba2ba3af4f331d5f8e127f6b595ac394f45553dc45a29949215d2ae6827d8765411b5c003bc86ced45c8ad99c3eb06057e546641412930eebf8510b9b188f5cf96deacd33c8ba15858597ffa055313c9864869ad09c6d3ad7236932b96b8b3e14bb841343e27782266e8dbf4f27484ccb436d9a5eabe6a3c1f0a6ca6d2200f7249acb6e704c2f34076697867959ddc956ee2b142216e12ef080577a6ae5cd6f592ccf0eb62ccf16d5fedd04bd59e205f72dfb2317c333dd2d1d58e97f74f291655214221e0b6538b1bd6bb45aa113d04378428fe581142781462109666286ed619ad185490e77a076095488c9386034203d4a85cd09d8138b4acd0f9bb3328bef66787290118ba1d6ee1335c5c21d5525819c993ae4b7a700269576a575463cf584e379c82fce31f8c781e53a32aea80416433d519203f161217b4c38a132ea8e8db3f2bca468d533ebda85071b080cdf60f413724e84fd2cfdf5491c689c4c3f861d14eee49fd399c50384e0bac806f7af01857ebad3ed8bcd16e0bd78e6ff96fcbd8e0efdba67954579b48d4df49ee17bd273002999d318f22c4b50c1a6cc247bac289fda88ce7d2334434524bb7d06b38bc039004a8de54066cc206d19ec316ad9b88c28fbac62be20e6bdbac1d30817058c11a9e3dfd88305c1a6404b5e783e578a22dd3a99b7909a031b4b6e0a8d86e44405887bcb7a7bed2c053178cc32491ab22455c553b1c1bcfca04553d48dc4554bb0ebdeef636da81423ebd1a978e7a2ecb1b0c6b0d3de42b36ab16aaa7995383b6f0483d1c80813e79fe56d62c21cd70724f584863b38a080905fba830fcc10d8c20af9ee1dd1c5aa54c9f743ba003ff8cb7841c010c423fb0ed737e85b9c40433bca88636c152426c04e6ce3318857bb77b7bc620da5fde35de73209dc99e39b391ade367282fe299789b76e3754768896385db2e323078188b6c326c53800e4ad2f5f0846aa3887824cb8498aaf78ed6cc4d21a71979725373e3f7fb06acfe838ef79f3862f90fd69b0af074caa72968ccedd7e381c32bb88b4262d8eba4d98cd6a21e21610b7f42eabb2074c52244572ebb0e13484e624ba206e309898362bd31ea0eb0a0300f14ae36704387d6926e2678c57b72808f67d78755ec9b5197fc5267880423e7d6e39611b4f381db2ce77af72f553400f45371ad414c93110c796e82f50f45263e1550eac2a870214c99cc33adefabe1052bebea19cbb69a552b863da3e101fcd8aecac2d3157e0e42e4660c92a4326361ac81059b0c8af94f43be0fed35efa4a82b89da915

In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).

Large, justified tabs with icons
View code
920f4c3eadc7c7c554ac20d6c90ecf0c0ae514c468094ba8136aff04354ce61f7de9a2d6377dd695e7fed8bf0d0563b0f2cf7f13f9267d744b929c4596cc22444f64f7f1dd5f280292622fb62aceb5f75ec00cdcc8e9ef8ef6cd4a06c6f3528ae0279c25c40cbe33b32b178fad7f6557ea4b7afb32ec2e423a6e10d25494cd760d2b414cf704a57ce6ad8e9eb5ba8373feae7db1ebb4c90b9dcd06339f8e290f967e13a3a39fc970df0ea02647f06422273bbdc7310601d2fd68c322fec2e18288c4e4472ec24c84eadde5df0c9be2ee2b59c091aa498578a3d76e6dc819f3127be786998cdcaebfe1a4c10057d53bc521c7196dcb6f179f3b7d9739c899ad2dce2768164ebb3170b09ee743324f1fb2eb5177aca755067ef4168aeaea0dcfdcbad8f79edc3b360df5b2e62d2fc00ab4fa29f5071cd337d46188e867e5a2a5a208e20acf1a713dd7930c2c5a80936108eea2f036b18a6db0ecd62bac3e017a3f815d1d5048aa92b516df500bdbb708454f120a15c592e980af560b4755f5df1d65ffc72a621ed5c2a9e479f38f9e3c354f0267e67bb27786b805dde60774ecd2ae8f2716d4eaa4477d5cc01f408e395776edd9f9989154509d8cde3ac20de0daedce7df1d191a4f0a1febcb2ddcb63277caa79c317060e9fc017954fa5c1462433d4a20fc6ef240f59eb07ccafa406b2d6bd13748225f20fcab8c61d395e597e9f3b7e5a6f5885e1a6d8e51ae4115ddbf255e079a9ef99cadc239d45b4281551cc171ba51251984d9a3375a7e2af280f9e7cb43dc5a89df92662202df4da3d462af384b4dd8789d97bfcfcc897db2a58f5d0f079a9db1b7c20ec909b937252dc55790793110bbed6259f4cc99d0be4dd7c56c2cba0a67d60ef6fe38029626674130128cb253022321eb237bca43f14908de8adf4d2133effbfb1240e4c965dfaeaba1afd922b2d359e53d0f42e14031a7c24e8af2da11092974d105f8ab5c0d5ddb1c55fd220d7b824249157baffb78e572c7f8a32082176a5780136112fac65033bc0ffc5f916819b7ee91854962754cf8eb4567a886faa6d43cb02544adc78a19892a47be46add313b220f805da8db8c0b3bb213b85d3d2ea50771604f8e492713592962315544a3645eb138e6696acedc2c48d6fe891230de0b7b9ab5233f0fa2c37edc960df5457d89d9658da01f76782515aad4b19f6dc4477a5ef4701db68506e056f6fff00ae0febfb51afe65ad557f03d9d12ebf020372fc8ca1f2ada7bcdb3842370d32b35a3e78d6d79682a57b742f8689b53b5874d4ebf78bff344304d46ed9664bf7082421b0f3e13513c042d823a2f2aa1a7c4e46e8d23b8725633d394196c6bae6fae7267fac1d2d32f6517ffb1d77f80ef60ae1b50b79226c7b3f432b013941bb9b207527e9a08459a999f730a9302c96967db26d7013eb080d5ab1cfded316ac81c05e3ab88881955168557a6b714ee6f8e9816d453b5fa04b85f27a67c629f0297bec37381673b32cafdc80c1b2a489f2ad410236701ed872aa64725a54fe237b3ec7feecd2ad10475bd870942db8d57bedce673401bab33a8208dfe43eabc439904d5aa3d898a660b051b4b6791ef3867dee48c60418dd2f5915335f0ddc0398e01591f372b21a59f84d500d7a8c53f554ccd7fe8a0280afd9446af183e359767e6a2bb23aab34cdbbe9b8a1a0bb20d66ff72b6d6e81b192177379256038339c8e3b111d0095a7ba2c63a634a0d414e94bfa5fe2a5cf278312e733f650dc0fb422cda337097b607d9977df27fafc42f3fc51c2e1157e7f1158324fb12e6c0fa3027f4e42a641c709f3bd60bbd9af5784c0899665229df340f7819979cd57621a45a6f4add17d4de5f1fd2422d7105d2cec45a46dafcd5b4a1e91d9f2dac0760e6612f4b9b47e7f3ec3b24174af8fcfbffdea3b9852a508253c4182d9eb093d6b16d703ec536d1c643f95ba2e2db5e700247c272c78e5d4e745220a57dbbe1531be9c8932b4886c0ea519c9bb4e86cddd213b6efe5780101ddb63f6a7cf82adc52c127ae4f184576e4002f1ce65e982f3e47ed2429c6db28cdc18e3da70506e6c8c0df5f5207f08335baf208638a274c1aedb0165261d36ad9658c49d3058830018a587c68cb1076114fc3ebec485502a9eaf71a4de5aa858bce95c74bf8d42863d17e79b6c3a4eb2d732522df575fd180163b2f9ed46949408742046364b95b0d2381c0f869ac42da8866bc283dddc63b23dadb8caa70b4e8008fdbb74d73c8877d03078ea1f62a9d53ddcdf375e7ee5cfbc98f40f59dd15d0e7a1ff9806e028c5b2f0950d44a023486f2f550ea2681f855b40f370562fd036bf9207091104e1f4442ee052b93c2225f4efa2501b67aeaaa17bfd0b3de5528b28630592e01bd318e264b412a566c0ed38052a883e118228642d44fa5f500cc9d7d3d77fa4891258d649a1e94e7daf8e20109404fe5de357548b68a8e7e73dc1bcd2dbf49d36a7f325c4fe8ea5c3b2c39e2abcb60f98ff3c22e9c04e27dddef6dcb7c26fc07b68b09cc58c38bac6c931b899e55cd94afafd70eab75d0364f28c94159aed34286d7302fa75848da841841f633d51423fed014546f2dfad7f4350e1233b436cff7b21c361661a4d2d4921cc1739218f3940aaaf95fc1aa0a970ed44b18a471ea046630e55ce2fa3e92c59f42e8f18efe01498910e68d1f29ee77e413e09af9c6bc02683b719b957df6ed93354ae53eec7e6ce77cbc5b6cbd3cfa82d581067927153ff9c1b2e0ecd915a2d57e28cd4edfd374df9bba187f31d2d634d92b347ad7c0da18f7c53638a8de48c5eba2369da9abae48d7f8917aeddd2b8040da85890739895b89c6473b82bcfd27094989adbbaa6bd5b60117271d819850296f9b41019ad75cdb48a4cad58072cb1de1f9e2f718718a0e8232ea62300603117f59a8e45c459095467f276032adaaac01b0e35f01703427c083faa217e96dd78b5fcca3f1e5bc085bda6e76e72ea5a371117116254e03a40f561feb60c6f9faead63eff54a775e19ad2f458555aec993258a569525d94bc05e63a744869eb8e3ad041ed1cb8c0a9f73e86bda872f2eb624aa649b2ff5eb24e5ba50b67814ceaf877b11a804ff3f1d1e5e25611734f9b3bd91f5ea1038a1fb554fb52e32258f1044bac01e55343cf83e1ecee2955e33bd6642e14ed8904437f28e640a29e3a3793652f0d50bcd1b226531104ea35f4b0573187f88a50c9c82c901bedf8cdb237ccfff1d3df07dc2d7109693a1a3609baa9289bb1bbaa209b87db571495e6ba368454d1083033ab7e3a85b4dda04f4250ddfff0ed561fd145faeb5ca1826fd8e35a1668009da0e349452489dd9c55e6cabb3d221b15fba4c7fda6ab1a3ad60595ec87827fa7a1017ee595adff638f39f3b3b5acee581ed16f9c8a09c237b4da3432708ddb41432c217178b958a67f9178c6cb3f4aa2f1cca43ee59d996b234c25e25e4ea6c2c607e3327cb6223532ebbee663600bba25b55fe5bb6e2e202ac07f66b5fde43c43401c0aafcf2adfcf9ff1165dd7dcf9a63453aba4e5f91974ca290fd779742ccb46786414848883dc525999961685f3e93436854fc22446f7f9325a13dacb485873adcd561ae6bfa6bd5358e86cb1143e4f76718fbe9dfec47ca60a9e69ab7415a09a6ab856c815394add94937c37f10b9907e7abeef5c72a06e8311724a1d5c976d43a47725fcca2501cc733d5b287b4db431af39fdbc88a8340b01b3b7c347081e32875e74e79b8ecdc022d227308b5e57c307fe00017c94d21d429f239ff451d2d5d45399202109bb32bce7761cc32d633744fa243641aa02077dd75576a63b2f40dc17ba69f37a912661c505de2b016b63e3519e93d2a859b1b7512f805206da39ffaa0a1037e8fe021d0b1006a1d89aefa06dbee41bc2784f349a374aaaee36f8bc563b3549ec1d08a4ccce97fb41672434cbce6ac338674922ce3a27f4383b1e1d6c1f4883bdbd313f228207ac8ea6b7a9d185547d5d9962e7b43d4a756f78a57f21d5a50dbd7260ae82d6a0b2ca079501ee2c180b96a6163746fed4d21f7230adac6b1f1eeb88292e179eb4e53f240653296fbd47422e442118167e6d367ab830995339a9358a969f0f23d9f3a83be2ee94d4d1caca63002403e4784ab2b56ef3d8750ee86f5ba92b8034c448fe811028d791d46886ae8b56061603f3fd42fd593f85f81a54ce5b459633027c52475b1943fe2cdb318f7b97a35e2f5635511d26683418d187ff63d66bc87503406e5d84c803d2bbb043a4504c8e474385ed82c054ae25157e0caceeea162ba91bbfd7280f6feaca36ed6b466d4be4aca003b8026a6da9dfd66abb965f782f95c77b789203a9316903cd485967ef5df16c5e996b3ab736f228e3eae4b3276e0c80226bab6e97469de99c7eab97ab40f29312dfaa7e953ac02a73238fc3e8d64d85a906e348e937f851063057c0f238b0b6d628e8c99fb0cb0c29c92af55c46b152c9ea5b65394d9865d1c5e5c4cc8d4dad15bb0f5cb2bb8d12783c8c7b94491a93060517e41d7e380907ed29ec9d06320e257d71bb9d0d6557dfe4de1955daeb7fee60c3cb67c8be4f04a1d4248ad0eb776de921d1a39aae0a628028c1d6fafa9fe7c5d3a15af7f82617fe7abafcfcc2a7af99db4150b181338cf1a8c74952e6ef22e6e3181aa96a7423c7e7cd27c2fb6530837c485effb9f4f4b1cb6e4ccc0512e23a75d45af65dcaf5be647e9515813f55a084b47f424185fe2d2c6ab44af3d1feb51b7a897b0a51f05766a56131bb372d9ae0f610260ce12a9466fd4fb23ba31627c491bbc13f85d8307dfad23f26262ddc0217c5b04bb09d6423c13708570dd59ab6adcf6cdc0e41dab80c8544d09528a35a575c6dfbdc71c427f12c955b3887b7dd69591d847af95f6e9a1b3fc3b3c1acd4e41b19f4012a24cc94c218f09421cb5e9a4b100bdcaffb5355a455a08955d3b4281db4d451b2f8ecd66aba807d78b41cb3e847e6fbdd1c10baa2d8117ee87a6fa06ca99b2e662ddbbad63e53d76c8e94b85adc0c9a6f49ed355a40a5bd6e39ae16c9e32411bc79577e0a83e03def9e7701b1f56d6640fec69de6a9153632b53ed128f0e4476613aa196d71015414528b379183d62cd2b7881d918d827a53097d18d9cbe58d3159e4bf249c960ca9a645707ddccf56fe49b792e2aa4ac73d368a5e0027bcb3bf48677c5cdef20898aca235d639e4900e94a011ce3844dffb5963f7e5d46212ef54ae7202e5f74b3525976d86d0707ba8edeeee689aaea316781f350ee7930d3cdac5e5a88f8b3dc930023c63e0921c9e371717b77a7bc9081b65f6b09d2803f05098e48d1042bfc5335fce2ecb8d2921fe88a0695d761752ca4a2ffdf43ba0e77285fbf6d885ae93f3957e6bcaf47212efe8fc9a0dc9d9d0de7bb2cf645d3e262074ed63eff8c4625aa6371f2c5dc1b9ffa60855dfbcd56c1efadd6699c03a4123b5555d6b4919b6a9a180b88cad27c52bed5f2dc611293fa5bebd86afa667b28073cee3cfd5625976b4a421c2f074dad7e7f3ff9596af0f00bcf043691392193d1001fff5280622d3985b2dda2827b1b86527a086726ef23aa882f58bd4276300e60e1477606ec1f4af19a261191d6e26e6f874a9278978b4a7300245ab9b81289295e38efef341edc9816618aded4b833939928c077bf5fec15a9466483a9ba68d8063b6d6754bb12aba643d4668997b28ef6d78c52046a5ba9eb57572c06bbf259384e4e2dcfee3b09940c126032f8772650777fef7805e30b6857ea3ce65ebfc3f1cf3e9eab188804ef43540106e77d8941ac808a76d2fe7a88be234f94b3e2ec9ff761d7f4e2ecae0b16fe5de4ccde88ee895ced19e329683eaf3c11dd7bce55c4c58b9ddf331d1b94f2dcd78e7328a07e027848a8f2d8a17129d791d318b077a75fdcb25602f5e8f9452455a1eaf3e262ce988e6851559ac27c5e56512ed06b0f6bb9f82d2c2e38932944bb5353e1f9034216d1d152fa8c3c902593c7c363be9107ce6a5c9e3767d8405a7c9859b49a8dc8282af0a082a1e8c6e4ea88ce6e4643a2a0536e152c256d131d2883459d41fda1408b0de49e77a3177f075255efa691da154ac015cdd4a62d16666434a0fdb58f92b6848d53548a99af93971b3550a71ebd9532b830783f1891bf6c0bb169bbe3ea94352b356f8cfb09dee9a931d88d98f803983da177ad9bdf249ad572a8ee61789fa2b4e96260cf6e401937593c88328ea240aa60024a2a0ba9c99f5d1c693028fe0d8baef0120c8af9bab71bf5b26f222a73fc321e2dd483d65f5a43a3c99a57ad35c448a670a718bb65a5c58b39e421d0e6378349dd3638f8a6522dcad7bbc67c9b36b65dcd118b62b1010afb8e72fb4b64de5ac72c150f35f85a271689bf9db8c9a9e80612f1e05ad722207e545cfbc52234b6d4bcc253e2b66e7b0a4e3d84047ce43390027e2eb3fb202539814cec34c449c08f2dcc90aedb46466f76a61d7d1aae9519f7bfe353856ff759d0ca75e8dc96c0a8ad7df18fb61dbe91a3ff86521062d34873b3f7579a6857404c33ed5fcfa6efccf25378c2a29731d322295b26610bf9b640b138c96c10e228648f79a71d5a42f3d2e9854f2128d5de9672498a43d50aa7e5fa37263dd89e04a958800171fb344ee58ea58d72f02d13c5de4c07feeed2e75e6481724b3ffaaeeb7bb1687808010b6938433322003ae36fe55b4f0cc1a4048277fccb87ba14fa111d04adc75c4bd7637520fb6ca960f9407c0a79011ff068dfe1f3ba7b98c27e3d4ba85c1aa54fa8b918b6f5ccafa09ca5e638ad9b664d4790e02a1b835c478e892af47e55c3c3429f880ea417397b8cf3844c3cdfffeb2d72c9e6067c69a922b8868fa0dad2b40d28f12c1b489b7278fb22a9128fd27af2086929665173d8c01bda1f7b5cde895b74993facc0560cc34410bf9e4076f7d079def88eb708ad6973991b9160bfab40c9c0432f14855b1b9684b5fc3dd2780ad63e370b89bdfcf6d4ec25afbed29c89a2f43b9bad91f8255793824c55453a1c566eee2632d53e16144de7517d159b6c07e162b3dbb4cbd6a7e9933d348ab5e5a3fe016e94ba75607f3954a9ecb37b5390edea456eb731890acdf3b0e17d9d5c28a072d667a7d15ec6b9b6cf5c9426bf2225fd1f2a7dba06c30350fde820e00ffc63c907dbefa3cc74eefc49f03effc9d18162e9fe2d0e3fe74b8931d087ecf6477db51b3dea918aeebb427e68d1c66f54fd5eedbfa3504326ff8ab08a99f2a9f149dd3167c0ba777eb24a730c690adfcf064979db193888c9e79e531e1ebb393437d88717570567ad3f247840404f75fd00a209aea9a20f4abf53574bc4e953bd73615a7777d48bf45ef294af8ad71e8a9c3e04805abda9669687301072e705faa2c4e64ceecd904ef9e554e1a556196d970088c6142bbca0a34b486a6f70de45115f3ff71ace85ceda59426f0029938979891890b4212e52d348a886c630ed83248c30dbdfcd320f77175c2e22e557fa4975d133418ff22f34f27cbffac5099ff08ba88e8502089c6fe74c4a41c00d07ea002b20aac6fa128ff858da974c6dd04aadfa71b8e048eee59500e6b598241aedc90d4a1a284836a99e2f862d4cf250e48bab50bc75dac080961b6115dff671a472f6dec4eab2949de11c1437f819cbb8f4cac7b3400d7c3c2ada0037cf4b04e767247f371ba66df5e8530bd84005f5dc97f43c0a70d3389e036c8518e9d914fd56272ff1181ddb2a719b6450fd29d76e00ed5a1f385cd055403220b88925c605b3d0b3069e998e7eede6d0529df4eeb1f8217056c3fb5e637d37795ab5cd707dd18d5413e77512d842c66bc71bcfd328700962f3a01049eef197dd04934182a077016ea6fd0770e3f0d24a1c74655ef96f6776ca14fccc7db5932e142df0f9e1aa2212a0dfa6a0068e8aaa6a55f637e75d647135c2b4047c949124d9ca30703523962f11c64d91c613595b4c90636a0780aba3bbb67e4620fe06a7f5d023ab5271015be12187944e9dfe15b11ba91f3c27bf349ac2da4b788a383e98832526a0f589f7b716c29442c4bf81e723860573d13d9826404659b39840029df212da87071905c252b493f225dce5deb12b27ce2579a74482d02c8bff10e57b538b3fe6312416e0ae75c25b796971529e9ec288fe175709fc21bc265f80506bbfe404a21ad86424ed3a8d6604aa5bc63658d6ad87b7e713f0cee99fbcf79c63abf0f8cd507203390fd5f96d0ac5d9efb879375761ee56a0f6e7a4487c273c70d9db6664b2cc21a04e361e3afdd8e95efc0e6fb28512d734c6d3ca8972f4063ddd64e898ebf8758d893e6e669f7ba889c3686d597458d16d3286400ac33645c980dbc154642a8ced79d6a9e7a0f7b79d8b444f6cab429f8a3e839c91906058add4c0b9103908cf692120991a7440d8e71465ac4d40413dddd5969eb720e9d43fba4e2a20d94f9054e865f539010d0d96567acfa546f026898ff049934bef2e4bde824706f8b3bbad69b634775aecc751148c7d346892629953bd62da6c39612e6e0814fdf15b1fb254a8bf3c050288526b55ef283eb6880479c69dc5b7a63c5ac6684f93a3bea9bc4728c2db28805ae463c391edf991f03a7905d4ab7c9db1da49c68db8273cf7853ecad8dd5481873c3c2a5a83d12c6f184b8c1ba37b56bd6c759ede8bec70ae26662c0ac7be8145231eca19b9a0ad5a273694e8675fc7022983a744fad991d92e0d21c5bb015094ba1988e76196d00ca5b7d2495619cb55aca8a78b0201d3898140285828d8217cf336cad16be81eb952246396e04c8324009cd30b44cffd65f19a96db8336cbe5006d5388a19bba93f428d7532d85d579a262e6776d707a52789c99b6b85302e75a8bfa1715a01944c534b9014acbd78794e3a080a4610bc979bf78f9589c19e45be6004149b25394333cc25803a534e691520769f6d6606f70949607f6ec7beba709903114e5e28ac7980878a296c844b98bea865b9f2901b5ce6366ebe7f6139db2a45ab5051caf2d8d73ebd81236ac091b1a19ca4509cc57fd32537d92cde3f51723cf4579dfbfabd268c6b379156a51e5b79ddf16f9e0ecd3af0e8c89c452876fd0ab73611a7da6dcd77e39a1ed4ca57c2c09fe54a1471183df398a3268247aa4dc1439a26f236cb5d15eb9da4d865d8f0c89ec51fe72143bba3006a0f0b38b1f4b4015167d2bd72006a87aacfce506b38c514a1533637aa1e131113118351a0ea2e4b99ca16b1c0dd2bede27d98c7b020bfdacc98ae94b7b249822590d33777c1e0295c28afd85baa8720587cc0ee44cc4ac2c7562e47078cc210933b9e0a51b7272030a961343a8bb6088604a735c58d9c9adf81291c8bef76291cfa62c6a7da3c57aafa71d0c631fba0de75f1d7f9e32ad971c2ed297bb4d73aa77e7638e34d48eefe93f792475023cb20dba98fc150c5699bf905e220dbea4310a7563b8bbd1b11f50916b13d7a489f1e9716fc0d9a9ecf41d206a18dd89ff65c595ecf1d30783702f74867c29157a6be7cb4d2cc2437f58f143a0ea7122cb256993fb3a99f0165afb96a62e6c0c9fb617c600236e3e8e16fd8cd01dd8166dabcbd4106b26242be04c265c3c4ac61e472f67f941b40ce28658472e108b8cd8e2e6fb173763e24a4ce1e63b9c801dae3bcb86b6fb7d54199888eff6d65f010939be25e67ed13cdcab038f164108fecca8965ea4602d411b5c820dd65a3a3c465bd508da4bb55786d7820171fd487cb1b80bf939128a21b2c7faea5f78bd1cb963aa09aa036d98d401bb382eabf1f57af3f4e891ceb2e807ed59f9930137c9f0548658848863ea1ccc8651ea9dc6129fe473f1795ea810b07b863157a18caf4e7feb059e69580674cc1c2a6c8da7164dbab51a6c8f528dae841b45f8d11a832cd332708792af289b26446fd49a5b1f89a45a17b0c4f000f43d179eb382872513968f5701e90cd9d6772324dbeb29985784d449623353192fccc1ae989ea0912bd051aa18fe22e15558cb1a5b3664f93682204f968bb1c71d41e2afecd05a43d6446ee83e39b1e276d1433ab537dc85193a1b71f02cb18831e79

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
3d29eeb8afe38c4c539b9012d64481815bd39ef041391ac4a15735c07e564ccd29d98452cfdc5162ce3642e0ccb23eb861a5c741ee455eb575bac625ad546dad2d94146965501d9a0bea80bb189a9255c8462040e3ce558d7b3ff17bb45a6da14d79592c59e49b22f263552a8e785dc94aba7f121f963a26927d37f99e0f511edcf34be104943322542db489a8e9bcaa5c335c0c537ae84d7536e69dfa7188e1c949a08ee01b5503e44565a1b340a9f7885b83980aaec525f890319f53242190f1d7ba708cd65750a28660bf3bab0244dc50dbfc43d0c22763f7a3830d50b8f49479f4ec5ffd74dc8dfd8af7e82bdd431a45177b901e5ac4cf1164c9f2404be802daa748d32bae7d3e7c9472b6bb9eea6617b72640e8952d4e4fbc89cdbddfc195c95c6419c5ab597c419ef382888bcac96cea9619e6397cf9cd1371ac7325442d0de46bc1c15a2015c66c9b73a5fad73c3b0ccff30364146cf7090fff381d61f98f3bcd4002ee0d5243aab7b16d70998a7bc025b6c7f490e29a64c9b226c23878c54f2f25336e2ab05c274331aff8bb0e20cc65726b578e0b30c19987a939e85ea128db2d828a2ffda07fd1938013c98c14225bf88d96bea400024bfbbb8bb4d0b9aa143cd7d4d22a416b0d5ed918ee9ee7ccfb7a98260c046a14821eb97d1a7340cd2f14deb5d4f97d505fa47ffc5790b56b0460b409c9a7f860ee793ceef4c95175b0604a73107a8b8ef9a0a6faefb0cbc6d33d39853b062a312f9ab118ae40ac7774982c4fbe2eaf86a059b87b801fdb0103bc496abefd48d014845f26ff47191d52ef1a9eff8f3733978b8629015e4929c512ed87041586ea08cfad3a6691e8acac60d2151b93997910eec87d5e08df6e7ec81f05c0c0a273e275f63d64282b120eab2236fcc3ee650a776831e8eeaacbba7a098d25e98b894ac00ee63d7505d9fa1fab9f4b13c6cba102dc30bc22c400797cae33b952505e709d59ff1a2ab668ecd0eb41f41d339316d0fd7e6843ad9d7227ef066fbea6ed62ff927713259b7f2869e08a1c285d69fda9edf9cd0b5d153357dc5400410110831984ffe3acfefbd5e37e1dd42bd71fcf583fcf5d61156aa0c16d74899b0da606e99845bb2be648bf6732ce887df3963230242a41de4cb9fff74cedccd20df1a4568e082dcc78792f9ca9267845f1ca8bad0513f7ea26e8a4946ad08ae0d262652072206d34364be82a205bc0a7cb01b60e3d22a5a12c03717f5d2ca99f446d1e5ffa3353e075d579c6d2552fe03fea59cae8f915f2f8fec1d7055ce7e29c30bf7f281ac0a6847ed8d7efa898f4b2d3bd8028b740de5aa4bd3cb5eb3aacfc25ef7c653ba31176e1017dc84e4d825cf70e848564ba93eedc43c16fa7a5d4f8d1ed8cdf44c3e81154bc90a81aad9c0b8f2aef78b65ad21bb4ee873f60b501c14a9657982d2cdb0edf2d4425062751616776559461389a1f88a392d7e31a3eceabd66d4b3429c28dbb6a3178a92c9bf03319b5a98d26de518801a4e4be7a6297729d0f722a0c6135eaa41d197d0e57e3f435ee15c73c8b26d5957c8eaed69239104441cc1d5ad49367e5c3082e7377a17ba23d9162094de6dfaf6eead2433fae0351be93c4e5adf2f0b8b11f088b8ff2cb22c67903ab220e69e234d322500a3358b1c9d59e8d6c4ce41c0aa033cb5564ff40121373f4d6a6a02f678329944d3da45c59a002b23319d632fdcef44b810c0921f27df95a01b604000f43f105b533d2fe37a97f00ecfef66abf6e25ae1d8d855a20bddb3f94842e202e9d84cbd27de81d72b5c3d78228d62941662710f82be339f47eab4e2d70b275be97b00b5b363ad27850175b556514b06dc2f7e53a01ed77ceabdbb56aff546f7d5d84ca20b8ae2e7c9e3d251ae3d20922e24feca0ccc7d85970d7b122bb8abd2f0a4d94ef27838c0b716670b5e96c0a745b576e32ca6b61425b07747d9e001f59dcd95b8e436bc5a04d75ed813c908cf9d68c1b3682b7364ef5613f81ce5821f53c48aa4e46e0d693e3430c5e6894492cac983ea023ac20f784496955921073eca6e630d73c60e75f51f0abfdae2a9183b3d3cad23f0dc78fb26a963244f5baf77375ee7d2cab8d086f4bde8df564a19c63a803d17e1d1aa5f165143e36fc55770591d23de1bbdbedbc2e250ba7c76b42c4a1b637937ee011f9a5af239d07d9e86806425842e1eb8059ef2b0c590f3943faf64d8ac8e4db99aa937e2ae12f483582200d598202494f4b3d6694907095585ee1a6ecd29fbb5592e04d2aa4c9442fcdea3f02dad4925c56f2bffc1d0876751fd76a79dafd4baddf6372fb4f656ebeb97196fc4fa79c94a20e943a8012647acdff87c572f59d45fa3576bfc46a1a105d592697dcfdfc01c84afe33a6ec726a25abdda68ccc8080d815f946cbd275ccf6b7d740dcfbc29adb8b8e52358c913d8b3f5fce5384b727c43ebebaa715e710a10c525642611b6477f7ac8cd5fd5711fb829c0b5ae44b1ebe6dc6

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.

Related patterns