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