The default template used by the Tabs extension is simple and responsive.
The default tabs template
View code 0b0caffa4c38c9059eddc39ae9545f71f20584864ed34d0b773647dbb959da1dc7c7c3dfc4b755122d3b53126ab2d9a626a6b6e178aef0a527d2dbde60b972fc67fa66d2f45a9df395c2a1c2fb2c49f8041110faf837b51f691c8a73c1cd032f2ac14cd676bd4d51d16a300d5e0ad393c0111993a7c1f35a652b27584bfba4dde2f8584ffba3548bc45d4091698ead77ce0177247b5837882139e3bdfafe7b47f085f471cd305e5bdefefad9bfc6b81ff2f61937c83dffa63871124f4029ed3af939f1e16f12a7d640801cecb659856d2c0919197d5c2b4e62e992ed99fd4830eb5f24410486d2bcf0ddf9d0b43f4f671c01b9a092b93898d623bc9228b60164c150c71c9546023fac877c9eb927bacaaf1f164f7834e87ffaf32b43feb2d6b1ca6abf1180a484881992a8413d3a2b0be279fc6924ef79a3f6bce6cb3b48dfb92aa24d44c60c471e9dd89ec05896db9654ea69db0ae17e7b8ee55e55cc1782c06f2de00dc73a414eec6dc54d8d079baee9410a2c115102aa7a7156c1bf0828f573cb99729aadac710059973a2bd3d141c814c97e9ad92fdff187bd078076f5810e227de47d9e7b068da3c5b647d0b7e1262a97237e648b141bf6878c3517ec167907d028688142dfe90ef6cf2e5873cc66ca6a121b92db4ad7744ebfba5faefe87ad21e37c1110ec1652961dff1f69a7bb116317314580bf6cf969e91397599b287485cec32b19e499bc8323e35ebdc9f17dfb78a2a8e8282f354f326963abf5f48f2388dd0b6dd65ead50bd34a66e6735248afa868cf96a0f8a933b48a0c4f495445e692cb5c87eec148579665436b83746536e5906106c979a184f67bcc92cdee801e3485507a1813e071694e69cb1a625e148651b284b3dc5f843f3702615e096f76ba1acb27f6ee5648262925696f5a35b24ba52cdcc77cbe12c34acc5baea2d308e09d662c4d3ca61b139cb5e74200c2239015e272531d08fba1ce69746b462887c959f3147d96e2706a3d834af7bf1161282fe657b2da86f6651ce4e1a71551e3b94a0cb5e7bda0224a06f35829ee12f44c2beb22afe6835e1807ff02a04299e811b150f1e80e1085386dd8cb16b9ef1e239892eff1cbe7ed61d08cdd3e2758021d9dac08953e7816b0b3a97bd3f7e319b1ee8fe8cbfb084436566097d8aa281577f6ed7de9097c9741a5d27cf171aefbd2f07fa9dd1bfc074959167961284092ad7fcdb46aeca15541183668b97eb735aa71e1d8fdf92bf0c06838bcf21f1a8a96723e22621909f5668be286df57220aa2a22f75e23919d3bac468b11c811628b28ede83e1e064ed8df71c71e54679e56f1bdcfcc7b19b5fa1a9030bc8a7634649e03fd238561974b5a549b0df01d125d9ef50f84e801e7913b5ba8e6f0af4190b84b7b2c472c2caf82d30f96351ad8e3edf2dbb23b25b4f14727b83eb76872df4869caf2943163dd1e68dc2bf3fa0f1c291305b479e8ebf51677deb99c1f6ebf3b415a23248edfbe43acbb04a2bcd094caa34cab017b2ec4df77f216b3da901c7b1a8da52251793cffb11662148cdd2e6bf9d0c47ec611cd666ff3fb3b1b3d5280d4993c293202211a76a94d82d2f710694e83b7da8b333339d52f48153892f11142a94d05a22015e34a7a6a8155828bd39f8022a68722069bd6c5ceca07e5e9f9bbfb2e34a4bce7b476be09f16075b974bb7c863fbc30f91e2d4e9f6ba6682e9d1c801472b700be4e891337e6866bdc54dd00369d5d1e2d0ff919b9c86e297dad9d020ca9248ddded6547dd25f3cac0dfa3131d69b9c9b2f4512b627f9954c8fe7a9dfccb8eb0dddde40a8595d011c84c4d87c8377cabeb8f9524e78f74c6215c5d2a0aa78b510e420dd7306c09609262a16ad041dbc1d083060ac44065f92f74fdc29c3f17e64ebc8a0ae0607e7dd04196d54fc15d3345269f3352bcdf39cc9e2916052ba23e17afa9f0977910c13445c3cbd99aff3ab37ad8c6de2f17ce3000b20b28bb6e43a44cc2d2baea1768e4827b33f6964742671522b9bd498b7bd4388ed111cde5084925a481ffb896c3c700b0e5f86da803779885b32709496e32c548f390f1c61c50a9300f7b5ad57316ffc1b964dbfcd43696d107a3da17e722ae3d5e4cf238d63cdabaf880a9a096ea8b2cb018a9e2201a06a8f42b1d19fa9a8c2310c6429912ee07294233da9d7d42ab4fef832826b1d88163db5c46ffcca12b485fe34c4d932d4c69f738ce4f0c77ddf72756168048ccb167da9d08f90cfa015b4b565de7503e2637e7a20e67c524f3735346b7632d3a584953cc38129d4708a1735751c50d17ad49a8756ba718c6cd3ce2e3dd99e380e0c83259bb0b092833e0bbbaab5c087b9c5639df1b52ac9755ebae828061f1cff3fea9806161b49d13996fa2f7c2c204807b37399128a5624321edb1b75157cf75f5bc52511a14adedf0707f15c61bc9111307f75ed22bb7c29c9448a3c9f3dda6322b0fba88478ae7c452463b7a1c1f1b9372dfcbd6b7d71fbdb10d33e1421ef97df0cb84b6be57d0127b71a15ba3dd7ccfcc97
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 62a5e4dfbed7c7ca56cad305c05ccfdfd456e4031868966b602ff71808a0354dc67c6d677dcff7c697f10cfede895c148c395aca5ec73b0db691aa0fbb523c7f17b2cfe2eb7d0118e92a99b8c93b1585754b8e633124be548868f2e498dd7df0bd3995a226a97f62ead969e2cd3811eccd9613310d3e7676f4b33c5033709839c09c7c0a9141d9e7018d19df2ee7bb215c19fbb3ccfc9b90bd3cc8beeec913ada8aae82c7549cde3f6ad7fe24b1458465cd1e3cde174bd15473647b81b7b11141b45fe307f09eff6b498725cf3798d2f52b129a79e8ba614876db58c712036ef0df568111480273751986e5283776ded7e5374860dab3fe64f786f26cde0eb7faf32c2341b3e73b33adace17d8233681205576ee596da34f7ad2d7ce5ab71dc193f4b03f0c72378415f4a47a092b05c40df6e0e4e800a3b551ad6b8b3c855c59a0327ddb16a0a56e7fa76248fcab1844414894eb8909d629622bb4e19b3f7f7a4492ffc2ee6c1b6c0bae9564bd9c29bd6d2c7d89f02cd372ecd74c2a3bee069c029bb8f0052364987ac98b3aa19d4e5eb55534cf65d969a2ee15368a62c3273266a4b67ec1f1dd027f038b879aab047d8a45aea6c85475bf7cb509c9c9c9ebc4283d90599e92e3377c55bc64bb294acdfc48f2a04696a12534912e6cdf745537a9089399a7b0487e874dab61124618ba965940c920ffe80bd2e82546b96135ec0991c8a1951ed4dca581aae58420121cce2fb6b3aaf97c208ab5826e98161c00811671a468d0b6b257d89fab5448bafc6a364aa011cb53c288fa31bfca4ece8cc2ee7deab0be8492908efbfba603bb0c7752a5fcf7942dfc4737798e3a8c26c4d7ed558cc28b2be8c6d003172a504c42ef28bfe8d6afdcbb529dbec35237128528a6014527d1d47b00b6bde5fbeaedbcd8844938797b7221a1a3993dea6eaddd36536cd8485a7b948b1a70f9e5083b312030239ae857eac01f9705b04dbb5d9f0d5ca4b4a38bc6fe331a3d89ee6d737bda75e57f78e485924c9a367cc1bc8f0047f37e064c70da37402393763aca3197ea668323d199dc4459445fabc3d4d1b32a05579cc044368dac80595c04a05e776ae8ac56683bd75f5a39e55de44791760af350acae9363b366295faa515c8cea467b4954451629be9754f91c22b48c0b68fed773a9afb56560187790686bfee8bff7f7b88f707f5395339de0cd39abf3cc317626f4d6e809af626bc7a8910e075103bb362279b84f5e7d49fd8443bf0feece8201d65602ab056be55958c91b610364ca45235c9000d87c5aef92ffefb002050c29496dbb4e69e7fc1a3d7fd16856f8c2e19f59deb9a77b6d594381c00edd51713197cbe81307522b26653cca22e7f5ecf828973081a50371b9707c401d6dde5466c66c1f409a39c5364466db9429b8ea2f525eb93f077801d798aa273594e11dc3e06ae2a300885e49abff41119a67ac8ac9b715c794e0c1030b766e8e88d3d634f00f5f73a285cbacbe702848e51ec7bcff2f88f0e3eaaa753e9f1021b23cc313f37b2dce62f23a9e29638ccf02ead3e5ca4f0d8bedddd73cc873ad2b87d2a5785f00a336e3021670004b39214d9c678f7e93316b4b6a046c5bb71de7cbea398c488806624642cd8dc865b34decf4f436fd72e12033bc67fa2a48643a51170f9b7060c3f7c76630c6dbbef4de0881cb11d292588b4770610fa9c5404f0cfe36fa006a310bd962e22e7506e249878fdeaa9f0746c8b76e1c19f07ac2f7c331b2feb2fa17fd04dbe1515aeec00fb8195db03d1606579d47231c599f2e42d8d2de354ff7a1725ae8315ad771d1b3e783bc6aacaf8c91e279ac21640dfda42b5249003425c633c8a786c747fed72f26bcc3526217db8a994636d44c12cde83d96d24c93dec446faeef5aed195ea352b9f9e2c1119912e4f67aa8baa660d14363d6a7c73dc79361908a8249f0c84ac8ca708ea0178a3693be5039ce9b97fc31fa152e7b782f28f0384d5528bfb84188cbea7c01455405c18c962979bfe2d42a0d10553df8f5ecac3ecf878cd757c12846a4d9ba3263ca8f5ebee0af560321db45efcc5523954af9f985aef19229980014fea14afe01df843d3adfbd997227bbcfe0c0efe0157a81a3f8ad727e4e978baaca276df5b915498b7962f57c4d5b35a8af4688005cb5edb1b5546005d4b5a87183b11b0cfd1157c9b57fb87fa68d36479fc367100e25dc95f97d020bf56d891b001dfa253534b426e247daabaa78c4b0711079707999fe1c2f995519a293aa063f624c2dfe056f9be844285f020636b4f60fc8711a9232de218b16f73b0986c169d1e75832fa07649591a6a65056a44cf694e710c70fc3fa13445bee4b336201c0e8e2bd5be2c2dda6ea47f4d835fea6331f776217323e333d3ec51a5707c057dbf6a4486dcf93f8e29dd9c7d6268ca42bb42bfe63ec60223aad3b929e5c5ef8b083c59a4ac8eec376efb090367ee87a5108f76dbef3c987fbc3a58dbf53e5346a1983aef4746c3f6c73a7ede03d85fb95c4e37074e99299b20b12d75685a
In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).
Large, justified tabs with icons
View code 4ca96d0c754cc42bbc0898aff03c7aee35e8150ca8cf804850c75339a3bb50c164a0b53304d004c991794d8b7ae1de81ab84c9a2f364bfad3d0041b021169bf53420a916f758a03f5a318bd81ef1f4c03e313eeae1a067e5a34af753098d57718949fe6702d3921881aba0cfb267876ea5c736a1607d6b99ea48051428ae2ba8d15f1eeee555859cb33b94c8ec8b566d4225fa3eb3127de61b84ca90089c94a5126075ccb1a33100618970dad3c4b949f55fed8f05c6d516938d1d45a68e361852648b7672bff9ab658ab3cdaf42ffb742618731d9e5c9765e2dff52eb33a2566f70e3b73dff70d886413a2ebf85fea23c062ee5eb854c97a5c89a49d36a1f502f28e97133d37c758a99118447f30a458fda92717c500d0f39d48d1f58c98213ad03f0c2944361e4e93e4c95bb51901c7ade98c29228e5420102680ec02ea073504fd105ba75bf189f4e7e805b24550ffdcd484c3e88d0156367ed94ef6ae40bd497ba18f70187061341e5ba9722798eb50c3fd195fca1f1cc810fc422763df8114ab90b7f8381123e882f1051e893d77078aeed679670b48415b3a9acd7b70fe6cb5327d7decc3aa8bbe82c1d3c783174521313d246f76dd073e84b2538096c42b274da426eea4d184341ecd3feac1c25b69ad7d9263a45fc09b6933c91cfd77fbee9796f515d3814f353c65fd08480f6b89701062878d3c35ee2b663b9e29f3c1138d41871cf869dc0098f4af58fc596e6fe7b4cd21a341fc679f60c052ef1c78c31bc13ffcc83ecf4e9e18ac9af6d7698acd385bb300985692af62579b8e5c8ccb8cbae00b5a17e123cc1ad015496f5938804979d4f4208b248918dfd03f5fbb013cb19abd1630c3e7c40f9ca1da5ef29c3b000cd1046b39f9771509cabcef1ab9ad5980943640c88860706055aceeb08421863dbad72c7697e03404feea7a7555a42e3d697c946488858b3ce1b8981eb02839db3289ea153acc330e612722978cb324327a06debd66d3d56bce99b9425c06bfc5c6893062e46ee9c2e8582f2d077204af4a6e42a639c7b38057f106249700823bb7200c4a53af67fd6c7cfbd98f97b527806892a31688cbd9b97ebc6d4fc4a644be84c9ec2ed598ec57a175c3a14b1c03268bc93ccc24fa6c674e7e28f3277616a8a3cbb3fd37dae4550147805f9184a7a2bed86735548b9fe2a42249a240e81680329f279ed3e74458d45472980cf1eac18be09ebfb2250d863718967710953199f264dc907f50842defea020d227639a04dacd12c389de855fc8a1a7883111ee3b96d2967b256218b5fb26d745050a4c4ebb81a45ab255e481b4fd8439e55e4cf2c8e435f29fed96651330512e1de255d3dd417559256a7e999e47f1a9ecc1bec142f00ce8043ba219087a2a98b769baa9cb6cf61024b0bed3cf7a5c73f72ce2329e9c7b212709e6223af3b6fa2a07a69355b1dcc441b0cc6593962f9040d82f991f8b0d54fcc7caa9a169111f0acda350b68fd9d854bbf4c0010a86776cc345439342283f2fbe227a2bf1eb7c22190cb4d2b3b1015d62f9eef657573e9a2a6f2ffb527f0fb6cb467b806572e5da8960b904b99a53ac6f4313120d6ac09a254456b0bce6bc2d8f17a9a04fe1b301a55d974199341f7dd98c9506b4ffb1b5a36d1407c4744f6e6d765809b41a6822e38260a91a2c3999686a3607929a4f24ad7fd77266dd4f8c6acc20c4a43e23566eb014e82227045b936020ff58ac45f09ba749d97d600c964c8e20139878cecc4c78a8f3f5744c43421e32ee51e2f1b1a22665293a13b86c6281b782d23dc0d2d013141fa9531c72e6fef7315415e091fc6299833d961571d55d4f6ef65037db91a583d762170d348e1e48b70a9f2088733a5f5f29cd9f91b9d6a4a7d89b4e9e4a394f2d96fc7d31719e517c74eeeb3383d09a46cea9aab348d4e78a5ebb66f3f27b5ca29deb8d1c9c3b1a4fdf8e2907b176609e1efef7be3c8fdf954e0d5f4e1537c6015d62d4066112f8681b68f02bc528fe512e7bcedce832f4a7f0ad70f01e4e0d38f3949c11665df905f44b33ec9d59aebeac008e1195868a7693f2647e261b32637cd8c8f97a895812448c70bbcc6e66ddb558b828fcf8340785e7a7d9860aabb366e0f4ba99f8cb562b468cb21964ef20d381165e583c58247b2a643433be67598ed6a4bf6dab3e107db3bf78da4c73d35ecfc7426f4caebd7d5eb9637177424b380b80bd59f037164681acf49da6055987801a6061ecb934a7a1e4f0e8d8196d2e6a728b0aa1735c424707ae7897a2ba42c4c275a8b9bde8a6f2df49cec135b2021e8ab591256efa795cbcad4a44e4e30c61312e1626d83acbd212a640116d18f3f8c27934369d3ff8326cdadb8c37942bf9ff0f64f0d925aa22162ef0162b93a36c6d64627b1a3df2561758f9e8fc5342a4918fd5bc6e862f7165ca29b62507df342090f95de8dd83955e5f1f888c7e0fec01e81d8209e864346c8adaa232175198ab87fe209f639220b28bd54ee941ad958581e215dd00a87000bf00e486957e709ca35a27f346d7b1bcadb1fd8da16a9aa1349f7350a22f84e66014efad0518006d27ecf7e75c9422fba222d03810e0623ac6e52295dd7d7e62fce7b5b688ed56254b9189451591121070252f9c1b8c1b89361019f50c184637f495d5c39341f5c8b72b587968b0547dbbea8126130acf4f6ac72d9931791a9675e96c9e741aa03ef166980596c8d03c64d054014ccab9bd8d41338664bf890df26e3c4dfc2b779d1318bb51667e4c2166de989684df32de28cea7e4753fc8d5b3a2c098f97a98efa7aee4ac8d470e4b98f054d89db045967b384fd9fc7a185cd00d910f8d7d6719cd92cc7b327917cbc6a2f988006ed2b9da8d67a054a44596235f40efffed19dcc8641cd24c8ef3f18eaf60a6845a6200f22eb365030da6e660594281afe97fc24a897167ada392f3a22170cc39d60bb826cfcb3724221349abf563917b2c5489d370af5330ba02ee1ba55f9e58e11b210292c7e3694b184d7e263a8f5ba0372ebbf2c7f4d8fed78bbfc9fb44920af1f4ff9bfdba7663626ea4d36373a7707fb7c62dcc6333c941408f0252ca8a1a4decd3c42f8d3894b0215a063f3f57fae3990fcfad984ad3333997ec86d92207f0a55295a82fe6a4d1620ecfc31ebeeb0daf43d8751b8ab185dc768410655bb3c6529fac198f7f46099ae5038e1bb8122d41c32793dff6d8e5de9a6835b22376db5b5a93988235c93cd63f143eab397cb7a4d51814def8b0f16606efeca2c80cd28d350a0cbcd5d724713ec026b44e9d54df54bdc9503bcd5a20130b501e276937f55f570076fe2a6cae55bb47c3923b16113e64422354320205748310d7a7caeb551b9555fde30b2e5667eee614015c20d895b2c2aa50b292c1284a2caab2cacda2addcc72e2c23e4003aae666edd74a2278b27225dc7cb76a96b12eeb1a510030e4e32c01a78778fa015fd3fa0f5fab0f87866dc2c656ea273e9e8bd8ce751f4dea9c403e4d3888f61420aab3d2e5094db86572d97482ccc82488dfd2d8625c958c9b5d34cf72a01f37dc223197da9beb22540baf9d076b85eb9fa1c520bebc7bf5df8964b6eb099df974a83cee2ecc1e3a85051a2e4f0310e2266ff83da61e3f29061c097d96de99b50a007d076abc14552a2751b04e01cd493fe48c77608469e21908e0e9f27165ad9e51b8b632a4f42e2a1f58b244a028a3b59039530f423cd0200c397a98431817b94006ec31b733bb6318b44a456f231e823bded9ce4cc9467d0bc8c43c35aa37e25f4923511328f605c2a9fce8928ca4261b717f4713099ce8661c7e75c6f77a0cbcb9326196642288f9b80e894a76e866bd17dc67e34246beab8e08c51432f876b2c8b9f0c3f947ebb3e9580112272ef6495e2bb98fb53641de821c9760cb78b76137c053cf1b6adb4be042507e034d81202c933d47363dea293ec6e48c7bee6b6a0f33632e529c6289f653f6986b432cc2bb693d0310165727f40d4978a3b0e61ba9c6603d3c994059e0281ee82fdb350170f2a14025da9b30e45e656e0b788272df50b0acfa014d9c904544241adf13a9feed6526e805bb1b7e3d0189c733f9faf5ed62ea0bab6f6a5154a61f491b559fbecba01523f06296c3397431b8d63f6ba965b58bc8798f8b9dd07d32908877810ed89faabc63869c8877f73f244489721daa2605a6bca4eaf636770c391dc9847fd3f87362060c0cebe84f7e271d79517fd4c0423244e7dc32de4fe139d9bf71d01a3ffc95cb1864b8c7e28ee0024fae4a6d99641b06f492fdd17c24adc33b30109d88a50223dde0e30fcb498fe99236b7c52cf7fa5664f37ceaaf7b1999523f7e0f02c4229518db28b510825bea8fe142c071af95492c0cbaf1c69f167b31279ec79e7b90435e2f46cb1f8d2941adfd0dd5dc6b10d464983eeea1cc6de50973f209d707af2fa48ccb0acfd64b0ce8dc1d560be3d28f107fc12de54995fd47930e69342bd09fa2eedde39c4701346528cb4198758bacdc66d8ce092c7baa543800862670f6de86d7c6e94d843ed54502e0773ca448d3420c3aa123ad46b3c8799ee66e7715be748266829a416434af7f905873ca5736272a90d5119f991fb64abbfcf2b6a7ace23e69bf9595f51c464a10861897a065c5383746a8fbe17215bbd442c2fb6590f76d6fcc675dae7057b2e16920278a999c98abeaded272bf36c1c43a667a2860288a5ee1685f1ac4a45dc6c0d0e3c4f933af840b05e22516f0cc831dd3c94aeedd75fd800e88da76ba014e0fe4d10940111bee98e9ae52dc127b221302d33827e30c25de27c6bbe4b98ea3676841396a1cf8a0e7617eacfdc7ae70beb03126dd9f1b6e4b1746387c609055e4aee366f4f3f05cbbcf11338017c41d29ad96a698acaf6cf5f1c30299320181a64aecd125744a3b4c3a268bf84feb8a1a94c7fb92cc5e8b1dc4fa6c6dddacdbb44c14bcea426061d1f1ed410fe17b36896bce3698a23208f780fafd64b8d9115f8d584554ddcd69665a67e38d29063ab0f24b9836c1da2868aa94cac2902a4b6cdad2a3dd7d4cf3037c9d1ad19d4bfd83c05ee8aef2c2e9f281f71955ee00ebd65c104185adf247a95ca01b35173a5914923d00ca3851d13493fe6491055f863f35f0bf3de3da7781b75562eb9ab4b4fbc7f688d117121e51e966391948be57afd3dfba247df9b0660fb411d9eb7d8c27e5b1723cc7d69d8f9270b91ed953147aa2289b077639f276199395217e420c6f3abc3b50c68b8dd7bf0520acc04471ca2ac8ce43f8e5091582d91fd3caa7f7598f1b1ba8322f0b9e3c2d92904ee26d36a50e4847397d8abfd28c60fc8f504031ebd8edfa49751bf7fdb8ad8072882d6137e88185a4f11937f54a4f83319e1f5721be62077a50b8485087e1bf799df65b933511c7f27dd7b922708aed22c6b93875952bd62891eeff93b79334939ffbb13672ef4b3ed3b85ae85225b701547c196af381bf926f70d51b68020b62ac1c3cf3237ac015365efb6a361378bd8739a3605efafc074e42ac774a6a2553f33ad7bcabcdc97e5a925b783eeb7f5ea4434c3ecc265f2a7c1cbe3325f3a9b31ccbfff3345e6619c1b2fab00d41f7cd56cabc0784c14b4460892af9c708b17118f97c592a9f609df8d486d2974647655b80c9f0d85091d3b8190606523269d6cf20ad8ac8e939b14113536417a9421b5aed8da6b2e3c9de98bccee72103bfc41be8e3fc44d54f1635cf32fa25cee9fcf780726dc2e13e886df5f0c52a355dea1aa8b7e321ce67d0934f1f7d95fea196305fbe59472b3a8ae26be729626880aef5cb02467689f9db441373beac05480fa9261dca8c55610b75cb4e8e0e77faf849fbd28ed8bd831e53fdeb3f9bc7f29ee1861e88e8d2b7a616e36403a3601bcaf534c0691d4a550f486054dbc4dd1b72753c4c7f5a2e38033f30c3c33fe48c43989d0ac50d38b9142b5a708d5bebda8f55dfda9bd165470ca50ce7fff65b07d5762dabc2edc53577350f244bdced292a492fb7bf5872a0ea8569f6ba89ae9b7065cce1ffda19bea462f934eefe345621e1829f236d2b94210034ffd443fd9a36d0d777467d376199c8550dab41bff299913a35ce8ba63e6682d54f00cf233c83b6c8774e049ae2912dd89ce4df74e41ee97dbcc1d506c4a90a542335e5c72fd8f839790ebdb878e710181d26f2defcb8e9d4cf66c75bb9f6220e8766951cfd1c43ece26280669e1cff98afdf17668af888a7a6c31eddfbff8bc09d8928965561b405df8e9197c523d03dbbeebc05919ccfeb45f33ee8c4f7cbb084244a9ee1e5f227a595d18179b429af09844b275867f2b5480bc905698243d0b4534785e6ceabffb88b7405008a0391fc19f2492739535a85e6b36300efbca56b0554e2c4e9f752a3df0eb8fabec51a92573ae7482e54b35cc1175a83bb64ea7ba6d1e30af176072dd2317730957b96319acd6df988dbd0c442cad5bc071c18a52603220be3046c4490389c7a1ee47e6f140f256674f5d9e14da589485f4da34295fca86b3fad8ad2c82abe8126298afa4b316374b31bc8fd152df02f9e0fb894c4c23d0a2878d2ab4881af8e7826ee3b714bc6f3b4ce135535e9298bd0c7a8b76a446e3d1f9e4027ad277cf2984acfbd883eba054b0dc26e329c35357bb317174f10a92f34d4451d0398cbffc6422f5a5ea1050fcae755743524b81e39a98e9b08bb8338a0d9eb8b0fc952dadb3ad4cf131b7334d97eb36d456564bab20448b6d6e58ca561225b4f7bcd693a986e6a1d0b3685001153eb8ae0655a936fb262b16b6476a162957efe7f016507553bf14b3cd6104d1f9042649639e4c613b3f92412679fb1946035f8bdddce56767ef8013eb889f026efc798576ba58f04cc52ac3d9b932d85f90006926f6e175051592813a324dd97b67e2bfe09571bc8f58a0dd10c23b98c89d7420afa9299665400319c430728221f3ff9d6b27d0a00b9ef5fd17419a6a78d542e0be4fd24617147f69b91c341e7ef0a0e4fd87b9dad0a1fbeb0a367405453b8f5bef8a09f762dd6fdf3a729850af198cb3186f929088e2297b98c03a27bb4707a6599782aec39a376e79d1cfe28b9cd99a87de8c9a267664d31e522d59c44f6fdd9df77a0501e6c906154dd6805c82e72536cc91ef3b18f84f7e5f255061f8bc691f54d15d61589832a35b66389223f44e1c2653276b13399630dd8d2e8c0f6927e822422011893f283625b4a2a302320386fb932ec494bbbc7e3eb2377b53caf87d081cc02762824c057b4d9645d6b4221337d70221a634153ec022a0db942140ee261dea0511f4f33cdd1630a8ddf33d47731a45a09c8b20d1cdd596113e76fb9d58b7d4b0f6b2f4bc914a3b71db09d1eeb468fac2d1e1f1d0bf2142d5c7d54e444c4a82751378b3264dea8ede5f427781a7a1cad0bf85ae1e40eb5ea26c28e817824cf44aff737967d00641fe64d00321cc23ef15095fb73e64bd09c4d8902d3a800d47d4700758a6833520363d2a367347de6aa39c1fb4dd624de11b8fdb3bc2be238e02cc6985f447ce60477e639bae18c99f9d84fd5094ba3f6db173f86fa8f289420d5af6c146081abedd06b7ea288de56d5b378bb5c425a7abad1e3b8e0dd73f3c30aaff4726bf031f1d261c0c4be245bcd710b0c4f291b7173da87faecb72c5b5047120538f875bbf6dfe5e4414713189f9dd7824688debf54ccd09c7b8a9e5f6f858801168ba83866449d1453855e8afcf6c7251ce65a015ece9476d94c6a1b15bff91fdc8f0b498ca071db992f9b5dcf1f493d15f6ae89dd8e2f2f0eaecdd2fb22be6da1502b87c0d3cdfc9a5aab1b6cd377e014585ce190e87728622361c7d03be91f6260160881000db63fd88a8fe2598071deaefcc7a11010dbc29a6ad1ef61205180e63295b71a3e7e4d52284622799eaa6324ae645d1a6c67776d7e7a3781307223b284f339d89b59d1acbd0a7fada4a866a3ff78e9fb253ea5ecce04a352c409a6d10a387a1487bad1a10c6c58b7911ef4ef45a611e3dcb1ab14ffdfc77d65f67631efefce14b1b257f86d9b056f42147c61f92e18e2deb655340fcc13319f803433f9ded1e19906bd81d2a2e28825a7efb5c0d6e7ccdbb5ce67f0d910d65a5eae5b01aea2b7f2ba41b6926e87d079ee947e2db37a8feff3c9fd6452294731815577032a955f9d1b745a6cf9cedf067c9bcfbebab7daeba56e49cc3204cd49e795ac6ae89883d986445a3c26bf60be2b7d7204cb0f2f8082f03fd82c04413f86d7cbeecffe318e19ef19316db8e0ebd078cc0a2274e1407ea64c6bd25aa72b11eb0918793fa7de3c7702247b3197e1a65430b2fffd5a4c0ce309f87da155593149931cc37288b70cc8dc0e4ba7e3523f7510eecb1b33809bddfc6e215c661848173af1e96d574c3a685aa5d42990eb35727694ca3314ed9e89a45747250a8f9b0a40659e2ddc0a8b9bc115a62207a99c2d1986c7f6a11da5d20d8a05c61707f2c98e758e71625a48c13f1a1ef7cbf00f059210c4aadfed34e6027e66b735b5222170573292785c844a26adb6e7ca0ab4903e3e614d5830644eb18664bd99778985ef9e57effc342467ce5fb1dc4be5b1efcb0f415dc69f18b528bad8a0f54a25d1a3ca9d2bd192f63a0068daa09e6c8311d9a47f1792ed9e84a97417051d15e998db9dcf34743c99ceaea1ab93e4c7de443af9a8f45db3f9d7353cfb24993a63734da236ace35ac29469a32b97016e8edd4395ad6001c2679af20750c62266ca705b547cacfcdc255d8cd2ffb57772ad9a7e4558908752f463dcae65a477498e20e05050d508b24b8b414dc91dd87a3a7a35c4e77f03d7fbd86b4219dc7421bc66f8fab350ce0087a03fb4105f0c5e60b9355e97e92cf7b4463c32415eb43ba03930dbfd39ae660ba04fea07e8c61e56c4324b80b5ba7dff3142384ef54894c3be50078579347414a8d4b5434b697186d627d80fe3159f7e93081529f39b5ba7e8c7bc0b48c93d07b62086c571e09718a7103391bdbe201b96b3ed5409bb5c412c25fdbe083d684158f2cfb988f5ad96ce6d98fcc2097b525f905889fdab299cb00317e79c0a8f7719b9ae842c462383d01ed6270ab309781cf7a490a5a129ba5a259e48b4c303aa10c08c31b26138dd151711dbfbf39dd2349c6120b35d08f9547d5092a48271d83308897cfa5f21d586b69bfcd2896388c534f9b8b62439f475f3d941f583492b7811faac764a7e4c01426b1eaf81b9f5bbc0e143d2f3289f67df52ae2eed51d60b57d5e5e955d3a6e0e7436a0fde47712b32ec1ca8252e5e0331f857a8f25039c42140c317a89de6af6cc2fdb742c87ecaefce46f892137582d77a24f9b6453850de1a2ae77138930c985fd14e9a845bb6a44be25fb9549203fcbfea68053291e61e6aa54eef1739fadee1f48f2aaa4d426f123ea8319a692b86c3b2d8d97a1bc08192b447390ce6e00ba5943f8c6647d77276e90f2eb983af06a253879e562b73d96cdf23843bce8ac480c96d6ddf42e7ba626046322112bc4865b990d461f6920286845550b8f3d6041fdce27895cce560a8ac60915156033a7d92502206e8faf784f60035d117e0f3f4c20f529bd5362515059cdd6463b379db9f3e3831082603f123a9133211a1e0e8ad66739c13f439b886a1531361b9bb0db187577af1d85bc9305a22a09cc1350d74f65ffa6dcf18bc02402fef76e089741420ae840200750ee1744cb8f0a7a7c4191ca905cbf42e566823068aef973cfe24e2c9ec2384716f1ad02d87887d73b6a0d5e47e480466a0e2e576715244e3c11f611617ad6d1c8c88d8fa882e10572e170b93e9cef9271a4e0f50b47a8bbad9b2e8974f5da5224ba750f0cdfd00896e1ecf4ec61f40e7c4a986911a75cd149cd79d538887322bfa518e7f081d35f960265d22d93fb0620441a8bc5868dea891e13362a6a32f660e9969c3be9b6bea013939451a58f35c8df983afea3a89fc682dcc3d54a1ad66bf238bc557917362b3a46656b087122eb1c2a3e9c52d48a95873689c346e7cc0ef51b6e36b72fd130c9a85735800ba35f7ba3456145366fc7d19a655206a58de2e9eb25adc833
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 a236b79e093951af740cb097bca593589e90dcbca5bc9a4ece2440e0f9c6da41d3b22b4307870cc83c227dba515422a8e4d843c8113b505dada1b428751cb10d8f08c63f50c41feaf411f546e7a77986e3915eb98d0d2a9a375b364d3771298376e91092189d9e5c46cb30b52ffe2b1420918c94966a60fee39fb994009388029751881fc6b9294fc3b0f894cf2df59aac3b28447c5d2d89d587c2784bd416a9cef06cc4671f64cb88c560254db3954f4eaab29e9e57fb833c89154332710470fb670463a090724e3615b14c0fc9f75a2bc33c49d344fe8a7294f90f0e4c0f977351d532dc0c97ce6e3cde607a69cee83d1600191e16ef89a968266a41a0fc0ae288f1413f8cf37b4347472389903b604faf3629fb9406eea6c1bc536a9fa352aaaed85f576bd09c10da782d1d78d789d5fc66f41560bc0b67f9d356606864912f22a9d63e383e163e7a0c09e626e648f3e1b867ed13b7981c366367c908b01e1470f9a62cc44170e1899a1eafeee8d35185112b3009c31eb0528ca89f3da766cbc1f9e7dfe0fd9f4111598189ff62bfb28ca3d362dc987e157590c40ac8c9a9ca8a4c701cb6dbfe5c37b3cdcef8c4a5deaf537c10bf6c0b05a1c87ca57a76028a6adace76e5ea12469f191cb964bf6a1737e276ee9e29de10acff4ce094c501c87671c0f718e48beac543852dd412189d0bedc900416f51c15bea3ac3138fd5ea1452731e4b764f1e2f4e0b431a7da20c6d2c82d7d4b914850cbedc0eacaf32d1317453c22e7783e967574401cea6c11e9cd32f611f53ee7b1ff37aa0a1cf770243e473ca7833c4fcdbaf59a7e58ec30949a3a854879b696849a6b9ece53b52db1546606c0fa6a86e5222fc5f8ee6d42dd4d70cdbd14676ec762b6a5ca1fc637974241dde5aeb290e021ebe2c504fabf3c7abb17efd21953e053b397e6d8e2f280a714edcd3acedb7d15cb9f259c1b293f632f8522f2c1cfbc3320a073ee03177642d8dfce9fbf8b8c16d68e8a91067cfe7966c76754c0a500cd918e01fe8b45d1f5c6ba54b60953a32af53b84a44a715861d04576f51f9aec38208c99469bbe9d568afa33469b930fcc5dd66337c374ff2d2c18f51867f9b4ad2aabc7be592e39f78fdf18923cd579e23d685d9a186b51d26e29581d9aefffdb3a9cc95003023bbe188d51cfa89bd88bfb54b8d660c64805ec9668afdfd59ad4dcbe1a243085aff396e943d3ed0e604bb43171a333bfc54e805a4c01d699b8f6c15ae4c05caa7cf001d4a077aa1e7fb0d6368423d3960f9d97616252735aa966064e2967c11698c22a6e94c855009f290dd82b6b59e5d3067411e4258583a905929af66c25bb8488da03bbcf5e5be8d3fb32cc782a4771dbb3d5e1c90424607f3d419f698223c5b7799f67b1c9c9b557a69f507b237e7f9973f476cab49be33b44aa41bda818203b71f73707ed3c1f350e1ed78f6c56cac87e6eaac9901f4ebdeceefe0ce233a562ea1733c05e4aaa40d95bee5be4b029b3de378b9b399c39db1d8ab21e5401ee15b23fa74baca79207c6c0d6912dbf2d540d5efad292c7757211cc29ac1aff4f407d93e0396ceaa17bf0e1512dc293aefd838e78558d20529f6e7cbf20c9528f78b6f30c96ae9d3deb92a17fa9204268a4c0126523ae639d7119f76d0ab7231e4581e5447537e3dc28a005feee53052df6fdc3d88809bea54d37a7b49c2923ae3db0fb7a0c20bd5ccb18a14c146cfb8eb52934d6a101b88979586a8cf0f335ddc38ba8f636069257e1ac08a3c66d47ff52980fb70b62f96b7aa5ac61aced1a135e61374f2d4bb76832703829101a59a8019d7c2bb3484019e6e7609fb44ab6eadc88ddbe9a621ddb7c64244516ac509ffcef2665d3275b7691aa3b86e48a4d72ca2461a0065f731c8d515e631e9f3b662987102b047e2a1d66e23304c48b1fd168495ea74bceaa22cfccdcb6105518a9d07a16f3da88eb7073f674d62c79a1f0d29ea6e88baba80dfd0cab097363719815818d647d8a0ecac14f9d37fb5433299f7cd14ae79f5836d60f5412b950bfe039b23675ce528b6bf0986f33df892a72724ebbb283f43250c253879efa5b075a5e9afe6f48f21370494ca081a10656f99180c195f8be1a42ab71497b17504ed2224eae688bc71cc55f196811fa9f55ccaa6f1228e7d073f2f42321f43270c0005493d28e663bc9e9a62aa5e86a9812f0fb273b0636985ecb8b0d2c8af85d11ae2c39c2f47e17a1ed76a38938fb883c73dda44e0b0ddd95c2327a50798debc25a110b5924c9bdac4d79e57265c96f0393b8fdca194c126ddb8fba79fdad0d4f572226dae2cb6a67721aa5465d6a7d8ac640257a2e13b17dada19141130c1978fc31552f39b84e8a6cd49c069e31f154b5a7aa2edfebd800e3d8d726cf9668816e099b3434ad8f3f90ffb23fb04a776494676dc83f33b1d8f818ae9c4dbff79586e714582d3b4d37b55b94314cbd3e9803a6cfed6b25147dea732755fd60fac
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.
