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
bc9d4978a017ad24607a740532a173dd636e95b47c26dac7bd8c3385ed4d3123f02044a579de9c663293d363ba69c07f138fe51d22c4391bfa2a6a769d8d9085c6f84a4a4ac637fb45b2ec3bc2bfabd3f75875b7610d97fbddba64c239a59d921b7fac9699dab6e79e4a2fd3873216889629439c8a8af463470085e5326e6c26d5bcce6048d1f449b7a3fea06dfa2d22e381682bc5b9a41e69ba5d2e36824b719e5b87b1f17f6d0a0e46f3b25836755a9d2b16ae2806f08bdee79d8cfa2de66d7bd72ddfac7305569266bcb95c477962e553adde8af22d41acf33722a2161f0828e9c5c7e8a1b346096b49e6e01fc1c5f05814eea0fb82dac83b48e68ab53a0ec871f3ea2560bf26a39b5fec866229fce4ac879c898667159b8d6734ef0f329656e636661862dacb3dffde81129e9aeafebb7738f7647fac06919ee64f5c9d590357e17ea1a89f9d042ef47767c840650e981d7fafc811b53adbf64b468c0262abb4980a09d3f18a7d4a67d2a7c28bd469db7b58e9dc57a5574beab05025003e29f6df2154ca9d1bd06f51ad50b3f34448562bf1bd45147d04a65b2117ff159d5c473c512269a5d5b0ae844ae74ce2b49119a37bdca7858cede502ed85bac88448b984e4ad663c690940a5c0e908e58a6c00e2993f1617dc6dbe00fda96af803476781f22637e42be554287889c9107f6ffbd54a969b1dae9d8930f2aaf66b936110326466935af54f3e9820068c0405d450ccafe12b3dc96c945edec3104f5faec94cb40f7847d1a51efbcf4e1a802562ee3d88f89147ae04204844e8d1ee12cf4a09d4c51eca5ae58aa835db27a8fdafbdf35ea3393465f1d4edfd6692024ef74131c681cf757871ee28e9a47e37645e27e3f580e38e1e382aaa36da08e929dcdb0986bbc2172758271c31c01832b677bf0e6dc088789c19df6b3c261be6b7355789f8df5c3851768cb8561e7ac735b204c9c4fac2e49c9021d9db5a26f48f0ff7288b125bc63b7d60aa2c9445ec0dc42958b8765e94c52a10a80d5e3aa29397809a08f025f3611424b17213fb8f6ea35184d1c35b2a5def8a11aca42819a65061bc63e481438f5a2143f1be9f75c40e4af3657684adeb3dbcdf4eaf810674e1b5423b2750fc9f10254537f607caa00ecc8cc4121d31ef25b410927ba8ea878242004a2a95987ed2fe9482e5b3d3eda54f9fb0a3e76ef316963868f7b51e66bcb4b1c4b9c359cd2ea74a8a5d7a234c5f4dfb8bb835fb46260eed304b652f1f4c4b3f8de3c83a05fedf5f39c5bef9cb9b2f970ba8fddec3b3186b1fa4f9934e4db87008bdd203bccc9b16d1ebc87ca90b606adba020309fa8ab947b985147ad01b39136312a534f4d932f18c4d46d7d34f880055b6dbf1ef890da396be23ad7ca21491a643ec34df2728d729d3763bc756358b42fbfdec71eebe6c7e9348887f1064f57512243bef0f2546d476d205113c6da02ccf2edcd845ae705a38060c781fbf59def952ffa5a2ffdf3904e6b9f81cdbc0a9b650e8efed4477dc34331ab60963cdd2b5790dfa241170b8a2bfcf257de8f2e5b3ce6b2c1b5a10c0443fa0b7d1e055e1e906df15294008216ff21425105ddf789ba902d40906a9b3618ec83a23c6648b4ad9c23b0c86190ede0342eed770fd37a289cb48dad7581c3588249c260cb3b3f7048f4c15d5cf05e2889fb0bb5491e5a6055481bd2e61a786fd8476a309b4420ee21efd8c49a5a0bc0438dd686d21e8bd7a20a523b5933f4f67ae73fc6a757537edf4a89fbcd5bf21642bfd9e0016b54e1fc3b9454f8da0d9dbaf93d4ad268a872beca4acb72eab0e40bae4176b230f17fd532b079022bff863f168f828ed3c40974bb516d454796a5a23be30d7eecf2d63cfa0bb12a549d7bb710e17ff2ae67b3526817766ec0ca718e47184847cfea30ca4696bc74f1450343da6b64e5c683de327bc6341380f2207d0886485707d004411fa436e84f441931a798a4d7294ebadf8c035c660e395261ad812608ad56b344077971729f3ed2fee24c9544a04c7d9febbe1a66b7f024287aee2f5110a29e5324816624b251a2d812dff7563ebe84f4e8334ac5a2212f39c2bd281959268788e2440c379cddc08431d11a4a91d17fce8200b9417adcf0951a6f7315b490b1d35fb9cdfac55c945b05482008540333ef81becf58fa3eb6e7ccff4cb6bc320aec7b5bb91b36a08b6b67fcf07b3569ad641f9ff880b2345c3e961b3b12a200051c0df6735c2338ea8ae017c062cae149e76928fce535e0e8f817489d90e4ecf4b5b42834a5def1f4cfad906bb6f8a1ebb44b9b3f5cc9f3a70bce53cd748d603203c98920efd055e9951883738c080055fb014d7a3a742f6c4c6e9b72af0569bc4e0de3ef3aa2f016e082aa58a7e8f4b07c512ccadbd4a6c82cc40c634614f56026dfcddfb571ea7184b14918c202dd6d1d2427ef650d7fa58e5628487fae5687d6cb1c62da4727d0bd0cc54a06d54ccf7edf642e5ab6b10dd2d69b1b37d1eea7da984b743358fb0e399c0bf2642d62a94005f95aef41b73951a6

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
79b9227885cbf885f3ad6091906dc31db82d7497dd3b65dc965fa8182210d6458a863ca18385c8bc701e3960b5685df48999669ec667ff7a6c07d713c9c042d3ed12e3d7f15f270e250ec0cfd37fe8a3dd38725bb098d3301874ee3bafda80121baf015ca72fe8266c38455e83c89e13f30d1b35eece7b78c48757db230d0fd02a17d9e8ddcd7acfe04ce642c94d0881d8006c379e75cbd09fa0b5a6dd5168e2ac6b20d1d2112d6783b7a6598ae70f9ca7a4bf1a8fecc1bae762f869e224136c5c528e5ea616b1f3d85ba56935aec3c926b88c7c5974c5b78c0eace932d345fc273731b77eb41d5ab162405db845d1ab97491b3c1e0fc18185162559781ff169c5d6bed03fdae30f73f1a3fade69c8a666726b6ff9f40bb32080c255a16e44187087161a75ac3abafc1d3077338749a3c00bf00b0ac69c5244461225dc780fa02ff1dd87adeefd8002d8815517da259d1aaacdb571c91af94e70bdf8164a57dc8b8527de6e0a96056d88678d52e6d4f3a14ff106a4f2634a9f36a6e5773a5182fc786cb48517dc898aa178fc67f8869f994080e286fe1e3402b42016bb2840ab3f055622025f7d064f20e77f83e3718f352c7a44f26efbefa7c623779a5c00acd9c0e194c5fd98ba0450176f2b5573c739e386fe24157fcacaeed1dc2e0e10ff1d8294d3664c49c414105c2b5dbc0d1cd00e4512db038454a4e0b9fff431a7ef207e6a7a5a93b04783aea42154720e5e8fe9925ae28d0b8a4c6c58478d38c3aae8ac5f77926bc0d888f12cde29e14eae20b8264978eee0d35958a56652d8c39fd5604ef3df3e5531931790bf681359c753b34136c9e2b42946006029e86b1a0b915694a13ba93f09301156103e029d0e7aa9027b8454b2863cdba8624bbd30594c2270c5061fe44561876c4c7aa4b24c589feab474e71be90a35f62e3ce8fbf5e3fd1c812c8f8667968e99ae57485443ba7b5f5481ab4ed4a674c20151713e805213601f645c617bdb56948f0e5e1f49b6ee89e2161d08ee668ef651bddfe37a42c417cf276431c15c7f91fa79aeb0cb06e82d3b39975c4265c9112fddafb12eda95708ee83fdf9597b09c23e98eab0492f7f5034d35ecc1f827588a700e7802372ea23c3eb1c31bbec05fe7f7fa826e9a06e0e5caffc7b2c35dd030dfd090c6df1416f503d060d2d1dc2a0f8047a970dda95bcdf78f77fa31a9b1e8bf5e0bf9931cf73415f710a7bc28b1cae83e3b5a2b69c70c70effd04c324818fae413e00513a79c104963defa9348fab44ba2e0966cfb22273904cd54241da291a54d90afda2976dd569e0d132bd05884b55b223feb7e295e2e7ca5d0d60e7433713ae61c69d744a84597c53c1af58916dd0a33bba914866b85a5951df2cc89f0a5136cce19c196261c2a3106a438d581533b15d198f06ffd45a41f69832c3a453ebf4210d1af28a7d51424d8e375ab3b716080652fd23c87e969951d04d38d0ac3ac70e5fbf9b0c2ccc884b80d6933eab99f8ed38ea503659373a1b0b7c084dc867b07d76d8e32a2f3ebe4dc1993fbf9bd94a9c96edbf5468ed15b694186bae251aa45abce47d7799b9652a53598613156d7d15be0a3842b89d144a797bf19edb543ea2542ea346ce981c07c35b5964a23c354d68daeb24ebf01b85d21bd70ff415a4422ca504a27ee983399242799c584d1d4c906aa6ba1e53875a6d4ccbccbe2563af5c5c8688f0f5afafff3049ad8c07aa6d1347625dd8cfc19753bdbd9a15a923d4528d79c96b5b11036d06adfaec5adbcf86262cb827327186efaf0f1ed92bd11d3bb44244d1e6d95d77cb78e55364e5245be3ec627ca215cedc183cc120720b794c0ef7a26ce203761a0b4a45c41ae53a3ddaff026de073504c1caf8809882a21094a2c2f2a99cbb000aefec216870edb0bbf72fa907d709521ffe6a268f7f86d1185845b972addd649c3672261ba4e189b41b5c40e2b9184ae7fd253061dc9956bcdb81737a07b96300cf072097a3761abcf80a5dfab3cd814234dd6869e2db45e3e4c385f831451caee7b103bb57550a53445dd28ddf98888095ef2a0ce5a700296b5c83c0694dc9fe1f75efccac8c05d55abd811c6c071637f002be91a97caa69b7e4c8eb4b8475b658a603f7832bff33ae091ea1b7e128734291b284d8700bb3103dfd5f192a6c9ddd0a9b7dd32c747cecc461c3e9d3d06b1a957f491073e40e8e47bfe560ed665e85d59b84e268f7e8ac3cbda06c44ffc5b63b8d01d45399b54b477c4bd6f1e59834a1b01f1c5d29089bbb7dd25929357d898358c8aa7599a93d21bd3c7244d95a773abeaeafde4d23e736ffab52eee85fd14cdfe9142f87fc7bd0bfce4dc65547f674dbb61b2cd056699c3b04ee22a54090e9d4eea101eebf9f5b9dfb51c0a63e4b28857a0a1d1cae3b8206b5370e50ebcf63fdf9f29770cae9d87c916eff42f26a01730af6ec3bdea4b0350bd406f1c2815a7cbdc1edd047a67f6db0c001b4fcf0cb681bd27ce5f839bfe82fa51a5f76ead6cbfd8d58672185dcda3044b83ea1a12dc5403e93b

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

Large, justified tabs with icons
View code
a5c83f242090521e840de9c90221417f2f11829a6e36db60845148d7913ee858958dc393939650c68c68bc13f6e27a15a2f3f52d97013c3f085500f46dbd7bd420173033beb5d2162c1ce61bcacdfe8f2a1d810858000bfc7731b4d6e9050060ad5a3d1da05381abf60cdf3dbd1dc1d03b4033c42976053b32d40610008a358197c529d649750e5b93b447e138a932723cc2f3ace69cdb8c64a2a759e06f8ce1916385e6ab562749e090440dff829999e5e74ff861f28553ea487d87ac7e8ae81acdc566715448dd453f26d007787181df9ca76409a1adf932fae1a4f2bed40f668dc1b560c02e6c31e47a88aaabc5381b806d2bcfe12893ab36c4360e78de34b624343c7aa7b8d321497cbfec1cc7a3c292ce7df67305928bd932d1e098599aa8c17f6323d28d996bf6f302a0f07a38edf2452b38ef29c840d9f7370c6e537158412936a7cb9d4ab4437eefcbf8d0702796b0d707c2fba18a68838a16c8e404cce6ad4729efec6b321ee8c073964e958bf15e3aa96e2a9be283ebe428c7704749b151b267bdfc4783fb4322bd019a0ad89edeae1a2d0586faa7fac4535e237f79337f94059716251fef03bda4d58be3c4e2bb5fb487afc0309c20b927f18f7572c8292d786d49cfc5117066dc2737f7047bd571149ad556ada8c91fe0f39d9b6a9d231d201edb64c145cd4de91b9a1ef2f811ea5c0515fbe674665f84202df723f9606ad7710cedd2026512ba5805914cead32c8d98f3131e6f23990a7b5584b1820fa96ec996b31d9fbed1ce62b43b2b669df496228e1c8c96842ef2a71aa4d431c30185d2a8ad1059a1020a974534abe81a2403d61ad7e9afcc238f91ee18a944ad1a56dd0fa5ea8dcb1e53f53055c05389d4b0e3e15312afbf9b01816d903edf6eee736f85c5559f5e6e397b61ef8ab5d38f5f4f8e6ab9275d08b5fd3e6cfb5c856ab2179971a8917d10b1ed2caf922a3ad566bc75ce95056c67a5d237b63cf287fc7585a397ef4560f82f2e6d918187cbad1735e9bf3275b753181f95fa492f5ab96d1f8d0a4e246b8e5df9bed86c39619bf12a2f7fb78b16166b1ffef75b9b96021b8115850a05aa9b8da628e9f6d1626e7a18de241113c7f1f2bb0db4cdea35fc20a65765eda5457df8af4853f5b178ba4e7b1ebb1aa3d791fb502fdff5d92049c18585226f750be25d919f2fc2a47ea272eb97d0d9e50d93dfb90c410bd560aa8f81778d6e1c75bfc7de22734d31ccc797fe66f8348f927d5a0ca467ced0a3fdd949e3f0427ac90b6ef868d2fc38d2fe96887398b8863da71210f19dec382791805c0c45fa16b72d943a7697352805a9f9b5bf260c62504a8993a4785b3b81e25854763c205c30a7cebce716400bf4c122af84dd53be1fbb8d873099eb6428176bddbaae973a0c3da5d149f153db1c92eb034808faad420cdc5b8b3074313116f571ef2fe5f97cde6483b5a2048ebc4506d927fa7880ec43ca97f02394679078f8507a501e099b84ba9716700b9cd1be82a98ce8c316d888358ea4b08906df1be40a20e677e88dd29a8a08338a97f44e7c338039650da010c1ea965c7cdaeb37dba8ce996c8dffc2d93ff9a01da0637d57065cd58c58f6db88fe9bee67b40b99e0213c47587147cdef6d1a0788eef080c7b4a6cc76bc85570ea96839bc0da66f45c4b221fc535971f0bb96369443a0384dd104314fc95f7c598b9a9fd47e359b17335bd8baa6a5278d221caba3331cf3838dbed5669b2e8747075dfad25c744e3de6652d6537146e62302d00e612afe28cb3c45cdfb6058d858307cb918e2a8a5d9c2f421b9f537378e628c783710fd4d9a88171706bcbd6da267ee3b01d1fd0ddeafc9c66b5d4e38e5772ef098990f6527f28a5bc394f6451df032509572b5fcc775fed246e7c313fded8112037cfe435da825f9526ad5d2875f51c12fc43b6ea38af3472ab97b334a291ae096d8302b290e84f37c863ae75d5129c52b8795d592ecd0e0c31fd975a6f95505a84402baf953c2cd2c592a9904db4028c757c89fa5c571fa29e43d630b9cc4c259edddfa91ed6fb3d886f877c0eabf0003364e44f0dfce3b74e461c28528857647028271ec0fced5c0606b818be7099a6eb72abcb9c5ef2d787527c9af8241d9a99eebab326a5e84c844fb7b972622bbb7a648d69ee893d1d54e1b56112c59c9e772e22ad8b89e4af46c9f2cd8c59398840f9403621fa1f659e0c5ba682c4065e27d57969c64e09801c858a01cfafe8ac83e5378e04c928e7a68e9180f493b130a7c47633ff83d4c6285a2b0e3608da6880073f985b4c94bb190e19527e9822887a18ca4c4edb36103fcbe72512ae0d99da6f49e54541120ad68445103a7280490b20f3da4f58dfe019969cd677f595da5666d86a01c39054344cbe63b2d44bd980dcde20a6f5c60a28cac82b64556af437d39260787e622202e2c993a6a6aae4a97800d6abcea987c66eeefec57d55fdb3409f37f2fc154fd92535a4da161f01237395541c9265bc8fa6c281d6eb07fd34cf2dac2f8079af0fc4241ea4f01efe9b93c330282e0bb22470ddc4f6e011373426d415556ed7898827c99ca2a528bda0ceb0b920493b413d896c2d05934210d8870582dae10dda4cfeabe555b34a227440e241ef266782d5638317e03db1ba360e4f6a71080e254f163a57ffbe3cfc810749f94539541e3c1290a18b6cd542ce0dca4c9de7dd7236f0890a925c94b906a6f92d41e3611fa06d34b01d0709003f73d1461daad5980394aa3b4d8e6849d90f454ddb3809d81bc58eb84ead5edc636ed7d37167b6d4a931025ae1ca6edb74371586616815e576dea948b45b05463236bcfad55976b6a5b55d01cefd1ed1bfb6fc683b0505455436aea603fe3968d89d5238d98f1a40837c1429b792069c13b1b5fd10b7265ffcf8c42202134fd3543c1bf28e4255f63ebc29fff4eb86213bd0be8338278052941f8efe37dfb9175fa12a52046c168647446b0bf640120374ce7ea7b3cf7e234cc2f19a30ec692731db6b68c2d1f33053c208b96d467ebb8fa1e594e8e0eee54c1aad2e13a584b7e630cb11ed65624123066c898f7f2da6bcfed6ac2f82714a88b1a870402b393092781ec754baaa30e20aec9e06e30ec276e797bdb264074a0773c495d380a111dad2802ab97056c35fd78b67c7fc5a5f84d983e0d5b918ad560fea87b6342ced8ca0298bc13d484c4a70f0f78a8473005a38be0abc3c5b06767e2a3e2eb3127e6851a5f916a1c8126d162557e892472b5d474d01d11a7bca6fb15118c2a63f025884077e836f8d6c4a0fbeb4606408ef7608d595337e94cceeb8f00a8e53a58adf8e6cd82a9111c855c0c3aa461b3178264f03fe13fd38961e5b2fbb6adc6dbcf96cf746213cf2442f5a60455a8f070fb3b796476954615187180e556a4e78958a7654eb5876a66e4dd3684d84b45ccb31a03fe32e6b927b5624ac3f8fa1e686ac241f889a303b7ef3511da73cff67cab4b9aeb542bbf4903bdd1d1805b9876a293cc2b4d325e9ee2f4d05b66779edf7bdf9f40ae5b7f58af8209a79c9ea2f2f9ed8d8240180813fde2399fff54479ec7cf727d7fbdc11c4f157ecb293a25a6c3ddf8201b34eb4f43dbf2d72b9cddba4dd22ae51e8f8cb01ed195c97b725f960640d8279810f3ffd7c7c7bce81c0ca7036e7c1ec1da7fbbe9332cc2fb798330e21b8f1174ebe33b38d14eeee156c51f34007c74231d8bf9ea0c7f881ba1690a92854c5c2972956e4eb11d7f7fb857fea637e5243d3fb9433fdfe64c5475589f29a62b539d3339e58b58ffb96a1652f4f269143fb9fb6050a0a154445fa7a37117aeacf8e09c960c79d8078bcaaed9b08df7893e49514526420e389b5d2f0e7b2bb8472a9dff6db6ed4da8d6f3f3033856464f6f4616014e570dbfc0d98efb64f8cb27ce98fadb33104764d6a733ff0a02ddc5d8d8932e5a50b9faef6007e07d804454b209eed8df454ac020adbd28e85213a87f0ff3b96e7b8f768101097f0aadb794b592b673075c63d8569364109f807134737de836ef3fdb18c01a31e82b944e497264065aa0618ccd0166a63e341fd017ae512d662ed78533a07b86f03b795150c0e2001ff64e2a740c571557b4b1a51d82f3004d427602520bd7e83d8d1cdd0efc39880cc6f40a812f50e244865fe5ec33797a86601e39a132b51a951ba103cd93dec4c73a9cf777529e7b8588a9a6c54087eaa0c43f7b668c10ec1d3d02a9ce979f84e622f4a9a56a0205bb4bb139cdc8f80a42ba90553ece0d246fd6c264ab61d4c5b436a84eadfb52dc2986cb38e5ac5569ffa0f5dd1731b99e73e3b2a4ef1153205d8c58e033f62ceee36282cad9302b90fd46170e5b80d039b4b1f7602efed3706765694c1798055b79f2aaae2746f495dbadbe43b19113007bf14d1a568f48c533f9fc864cde66d6cce1f7cb7a53b5e4f4da08c2eaef7c80751e8368ae2103aacab9ebedadf49dfb2cc3d47a0fe8bca2a7403432ffe20d9daa25412ef06db247eaebbbcc3e3fe02f5e8ce95827edfafc66e1afb1a8b8768d190b2303074d43583d46d602e260aa89a01d0cdc9f960060cbb309fe8db2ae8a24cab6b3fbfef4ab5a0a4fcfd85cf1567491200e0ad4e392be80643b3ac2bbec47cc35b2455db17a22eea1f709fcdc7284f346deebad7d9f628b0808cb45780d114b688ba3609dac4a0efe8e9b3f69b467f9c24ed32d8bd5ec0ffb122cf4a04222be0fe91eec0a962b0afee68b52a24c147859d3b200aa013b8a74081cd81b965df68237883b63fd757934e84968f89ec57cd08dffc4fdab55f8a87583aed9d16b6f5472aee1a269c52db92eaf5f6314def9bf9bb8d75859ec61e88cb23fba9a65a051cd2983ebf3b2774f48857698ffa11f6b1e8dda86ddf453fe4da70513aef207f8a13bc2b7c3c41918ec6256b9d3734e28ac0498c9904f1f4287c6acd976c44e39540306dc681cea2a7e1eeffa6c1aa30f53587d44562b7dca317d047324f64daa1eebd8c1f7ce7ac2223fb5076606e170594ca761824557b67a0750d9810c9d13a7e0a095f5dbe62a9dd277eb58c56803fbb2ce44eea38fa5384f0765862b6acdd0989a8a6323ccd36a776fd8d0f18ae89073caab64520e60e5b2a593962a3285d6b280a1cc65a5a6c23bd47ad9960f00f4fc8138118ebf3402becfde9cf162f1c0c4f2f6caec66c7e8c2ca00ebc82c1a80175c1e3ca9344eee67162bddb1e5e7db689a158aa71a8206559408570303836efa854b12c7d882341a8bb9001cecb7b79492c5718bc558c16f1a9168dbfd53558e268df369612073509a4828ff5c2135582cbb073f6a28ebdab33e7563883f25262c8ad6f893409e7e52641543c72c31a4d922091095dd9f7b06903093147a045e6f5010205a668012c5402548cec47b89ac8ba243d56661310a476b6eabb84c112910aaf0b0f54a661a1523283f3875c97bb9506c491956606b2019b299b199d94eea0fef3a5b0aa241a74c9b89242811d258c0c41fe488b7a1d6272c110858638b5105dbd05633207a5dc3b8cd5af3d3a792e436ca5dbc5451af948eb39dfd9e97d4238206061a42338dad44e2c26095e85d5171ef21370975e381eaef27cf4f285a53dd7487513e954c6364c958b050cb0e225a706a419024f40aeb13f6851df9bae5483a16b903c0b0e4d21cd2d6ed6d466b92e09fb7f2efe9f965394bb91436c904b2a0307e483ec7dd021f3e244b189adca246c32549093e5ab9724d9d7dd4961ede94cbb34035535f7598c11bd727cba12624ed6259412b47566d179e6b4b42ad8bba81fdcb43d36f026656d9d8b413f25d2409a772c37f6a4e164d2ae7ffbe701f4bf904de7a39a408b5fea77e03b720a90fcbe2a0342af10474e7cbb40d56e52bc1ef5633564b4013a92e263fd9e419244ef180df5d660cd0d1219f282f8c526db4b2a713465225c6993aa2a2cf7e794877b93d34f0ae3d4951146121627615269e1cb8bbb73de55698471e08b3fa3ba5a46eda3968c2bf055ae0bc51a21c171c5b1c7a4eb625828a175e27fa6aae37f578acbe2c699d5e67b04a1ccd427d57ed309b8289a6b70d450c372199e82ff3823ec160048cb861e535f6d6e41d1277708fae4d110f24ca8a2d2afb34e0d7a3b47ba723542e78d84e463fb40b41aba31b6e7dc21032ac76079a3ecbb98dda7c889261b838661a779ef983ed9bf31b191e9566cf3b52b965bc565fd9f3f79e235ca96f62310437858b49a5175e209bae448b5b1f40deb56e665a952bacb26a01fa8a5562be7e9faa2a447de97fdde470ff2cda6fd2a937f373ec81df03e35b065b5a4ce665356cc9d6a8cb865138905e582d5aef9c46c9b11c279fedf287715a7bb8c66f9e7ce60a16ceaca03070e77bf5f340f3ce040973cfcae7eb1ff146e590876c5f6dd1662de5f64dd2628a9aba6701ce35f7173538297a4c24267a20e3d977577e1731218cfbca20bc4678303c045b40c01356ea25dc5fc0e66e9edeb69ee90a04a928fbddcc89641737c4bfe3bd247fe3e5576256198d12583790b1581e4974dc225c058f498db0f20e06581ba13bcacb7c45bd80a8a5e7d37f96337570c565d9fc8813a4616a768c266188c4d4114ac15954260b09ae6726aff65648290ae742d324943dab954305d4752f31629eb3c951883e2421680e127359ea98bcf6941697ad486ad9adf209e2b54f2a57e96ddd083622d892247b21c6fd486d769e2099d4ba8b8b763baddc77c45626ca6c540bfc3ff5fc5e2923a2b5e7a87962bd70659fccffc32c0d448016357af3cb407a9060e1fe11572187e9beb6c62de853764616e38269d5536d5f94333a12b9a168aadae9b13db5362b1ac570a411bfe826a3d5b4f27d1f963346735e3332b06d8ada9ef76f8e85494da555d237253ea9bbe885ec2aa3755a093360af7e964b168042bbdc37006e699f0611ed4c158c90fcb55b0c756f83e2b7080098d8b9d119a2ddfd888e7b1b83c140d24c7278e9d44008b17b82241852d4ea1ce29265b010c83af3c16927e05a2245564254e9fcbd2d5321ab66d883c0e690e59a208ad3804ebc91bd155e9bebb625557ae9140fc518dbbd44a06feda030b3e60819a78a7fc5c67b551fa6fdb0baa48d7008467640ef4509e2772aea85591436b90647c977d604d9426630e538cc3ac2957c6a83229324a1cb378c7ad0409d09b77322e2b7d258914b7ba95a79bcf3572152214f38b66c4b74d723bd8ae953e9d2e91ecffb02002cf5c8aebc54f86574e6c07e84db8928cc089a9b6eed430b9e2db32dea54c96dbd913a85cfbf0fa2973158cdab56bd60b4608b1464ddc5a28b87f74a9856e3a07a69fd42961a68414ee3d03d0ee821e8851ec0e2649d8aebe0afb18d55379e3a6655343aebc3da777be666416e4271521c6027da67bfbfb191a1bad5b3fc90295f59ccf50663d550cec76a4725dd22c3bfcd4a9b9c5c595b87b85e631d44e571b36eaa6a727f46c9233156d8b45f4fe4b08aefe7ca579a0a50931e9b424da2b7e399f4f18c828da842eb987d7a4bdaa3d414d907196dcb04d002902e8953b5d14e9e254a263b9ab8fbbc362e35d689e0ecc9e47b7f03285f800a4b4058897b68d20564a13bff890d86b2ee3d783ec96e792196224a91d1892a8469e567b9d7c7a91bf64ba969cba3c07262ce0e7129b6e62c96a0c63ca649a62247f09b12487e9be1f0bc0db828d1a0e33632255d37f8a024bdfc85db21a864a61166626e41ad80e03fd6ece33a7908699a2073774f4df9a0e2e2d08b91f6205cd905688187640f1889bbb88d2d50bf4bf052843e4c348df65e3340e2b7698020f9e0935c66a9d90897ccb99f2c423a1e8de86da9392f07f7111cfe81e08845792a45900e02b347be374512a4730c9deb7adb8911df7978c6eed91f84ae5836047e51d65666ae93de976f7afe9cf9e0adcdca91cce16dca7700b2d74f6b18478c9b220112de1b1b9c1f9e2c3a1ef78e9b762142ad80c04bde55d20e80b85d6fa8e3df36e7463679c39ee4c45f6df65a499c531062528f5268669584daaa7c38629f1aabf19dbe63c62528cf1c8b60d070e5df35c668927b8a59f7260c8dbd613f26e88f28ebb76d66ddcca199f1455746244843e0bd6eb59259240fcb526799736560103c5281b2271952179d80e3d868df3d87b8d7c1c8cb6b26f3cef040c8b285c40fffc1b0b4e286d4a43e2eb19996f09dc49d997402f1806c787c12b52dc233e1c9e593060e61d4515e4bb9b4502f7e95cae390366cc0110256918c953467e8e1ec2fd70879d25f9c50c749e4da04c602a6b47d7e2e863bbba7d38b179393d9928300e0c7914be0bb0533b609194a347a736cd7556cbec3a0c488853617e4a51fe5bb63b91ba3b94b1c95a723a618476f6c226f19f3c5b3509fbdae2ef7064bfeb8ad6c67565f50e03bc8bbdf74a4c3f7eeff58a60db5744c3db87835f689bcafb130f51048326965f46428c47140eb903475e8dcddfe850ace0ce02d1aff98715c1eeaa46f7978d64d7551308dbe9477ea54b6340a173fb532f21fafb0dde8da7188ce0b6ef9257755ca92b2bc39b9fe9f0ae64c382a29c46fc46f799bad2154702ff8a2bb35830904fb6f9709b22f710a10a79a231615e95687f250ca1b0a7170a075acde1353bf827f132efcdb54c0c33edfc7f4940b557f6df62c3d2ce4de2ecdef3c015f7d00ceab78d54c076ba0f1688ecd2f38e7e5785d81f79a3d730627d2c709ade29e282fc4f7334eac46db450f7a39ac4579a86d22e76ded65be3af37c106df55f0bd0f57fbc2b23a879022ad886438886c01817d57094b466044ed1ae63b00cdcb4b9f0290e370b4481d65a5ac5444433b1d977855027d17a5e8465bdf74fb824d07594a1a0d96fa90dac83d46f320b2f031ef5015ab860060b7e8102099a258ac8069d01f6143c483fb61ebdf9ad0fd5988823bcfa3faddeb05acca5abd0565b9681003b1a59d329208bbb4a99636c9299987d834f0e2fcda31b0158d18e46f39148b1b0565344b96d4b96621f6f47833837b5aa7b78e76ed1d6e3ec7f8d93e290c494af4bdbc44eaa87ca85ac704f213e13e77c42f235cfc23832d6f257377c95db7746726a3dc0d6bfec486b991d88a8c37deed2411c9e2c06547998418b6bcdcd78aac8c460f0139ced6e057ca57a4229d8b4954460531db8d147f9452f5574ec9c46bddeb5b9a8024e0b1c89450e26ebcc6a731285c95f8088f04fd3a6cd53f515ea252c5a4df34ba0f864383c7f7f2a7b10f6cc42bf5bf1c399109103fb30a1916fc787c6ac68fc136707db82d2064e02d6e8ebc924ce7f2d98cfcb6a0f858a5fbbc851c4b48989e9172058384fe776b1abcfcee1a09fe15e887e638203abc5a32632b35f52e3f1832c732e1bcd0b10b08e020ff72da760184e570d0fab0b7169513bad30c74c9957b2b8b34bb9f91916f45f0a37f5e8f46f544ed10fa9efcdff79e8f0df0e00759fbfeb7b411c847bde841a0b73cdd6731f4cc05398b2f065a1c59a40d4f2d7f3d298c480a587fb087b12b4996f213385b5952f2cbfe4743cb0c4a17fafc67bd35e14d618017c3bc60b617c486d2f60c135e356619cf4d8589fdebd38f4274f3d5f1827aaa064855114011cdfa024b752c6f9241c52bc22dc8b081224678bb98cdc95e62c017e7890c2f7ef9f8a781167352c84b36d0babbb618030ad01866b15bef09f1ba613dfa1dce59cd2b2f4c9f91e24fce834f8123edecb8c48541122d9ebb4b5601099bad71557476eb870fe78fb57b09859beebe243505810c95b8b614e88c4c2b02673f88f4d33d1dd3d5c45330637aa7cae500cac014bad726b9da36a2298f08364bc3ba31c311512a9d65b1ff34d2c5bec4d8a324e82935abe7784f00fd07bb62f324bd8c1b5f4990197311aeb1b155befaa99b647c31e57d530a3af1578a0862a7936c0b6162cd443838383fab2ad1955a48b2701e62185e887abf87818d9a65fdd7906da64fd45ae9d403c3bb6eba9c9ac1af463724f0ad5046a8b9a3dc5b374abda7db74ebe4e6f1ac4ddc4a6a161f010c29ae99d03245ed9e2225f2187a94b18eb665cdd6bd4e1002e97ac5688673ac6b083b

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
741fd379e7a67177e0691ec7d08daf8a3489d9a8cbf5a14df3b5a1576198df8b7ec3b1f131baed3b6d8589dd152e04871af90fd2af685c5e5cff691ba6d5a16eb2d4b0212b12bbaab3121d4858b7a00fa20a2d6b2a73d78e769d686b111494c81da8a4fb27547262098622f24534a0bf7cb08a2cb8a16cbab9211e03b4182a163b4322ed396bb2f9a05f2e79f203d051cf6aabacf122c883855418fd2029857873b208b826548ab22036de121f722a0bcb7de542c63f37fb3cdf23e504cd5fff7c48c35fbd99c9816cd93ebacca850e072c6362eebead46743c30c2157502959dffb8397352900b0284de11ce23af2c28556390d22a5d7fffee501bad7482e9f375e42ebb1f97fadb182395c3378924aa049c4614ae91853c8de5a0fb12280351ecad3b21c22dec42cb4a8aab5a55e77d1672a68ac083dc2fb0436199891361577f9ba15d7c64a401db0f802adffe6c51570fae326ffd31253f5fbf8748e4b0932e0040a73c94778049243d3a6b674d9afc6e4d651da9b23de7ef93f36131ca6294305c2c0a1e68a453d61c5e89dcde1a65fe57fefa8195ebe5772a85c46cecb8881ee7c1a43c7d1d5b2d81c1ad376e080f36cc368fc4dec4b22cc924dcc6269e88f6d9ca5f77a78bf699a17f9f424c13cb200028c00977ef294d20530472debe8b4368d8ba1935e52288d3ba5d25426727b8a66cd1cffd9dd00535159063f005d0238e013a39f4a7efe50e15c7dd58d9f4f0cf56fc7606aac229c089fb841a9bbcdada861ae672db9f22e1339015467d1b4910270d514bd0217dfea02f93408756ef75e7c4baea82f3886a5dbcf3b9868b55dd7e3f00cedb872967a1945de9b3ed7361bfaff14e1e52dbe8b57a041ff7564723f3056e66b092eeb3a93d9004a3698685ad884c826b12a2e38d7259890bc88b01be9b18e29505c08786a216a496ee9a0f78736b0e65b19f770047b09006d94f04179a30e22e815b47a7cb226ef6882d1579533bd0c21dffd60f6194753374865190c7b0a634132f9dd6adc11c84b02a6fc0de5e482036ce85e2ab90bcb63f7741957cf1a8e6b6a01cb8a11db3bb5029d758f2a192a86d49c23dc681c33a4230e7c9091d1f21963d5b28b5a7e9cbdb66c645d5a2f8854bac2ce5ddf14736a35cf83f624c7da1779c261b611d9b25ef1f37d3735564b04273005cd062367ecd79bdd925e0536439a99bc6bc638be8bc37584f018cf11334d8ab9f6c36d39f78ec6b03e75d14658bf45b401500af138b5b760beb0e861102fac316f2a17b733b13bce6f0beee5e8061992ed4091ea71490ca61027ff562a3df7721e2250796033cd2c1715b003cd7f4fadecc69f4ab43c78ff4acd187fb7d51fcc5bb4edaad54e7500af1e2ce91175ad044b68b60844d9b63d922153ce7cb7a938162ca8fd7713ebedd6f15bf24a084b977e73e167e4ccbc1646eb9bd396387e422e1a88cc3a854e046a532d92f3d535f398a0ae4ee951657741ff99f1389cbe4da6b97a7a078ad88017ef1d71157132223d35b5914ff899d1c49d203be69fcd370745fc9a8621d66d40a42be4759cd38183ad9ace14558ee5ced6fca20c7803d81877ad6f4d956bdb892ccc14a6b3f1b4204b179ca85c1c44f860c4c7b0904ea6f34991feb51caba982c14a476bd810a97cb709e047f457e82a7aa6db3f1266ed59272a36dd7381e2dca63d068211ec4b4a2792e04fe01033b8063324df38eb86e72f2996a25c3817588568402c036a3071c52503f1db34627044eadb6074059a0e120fa84e4099aa0edd350ce8c3eaafe6856118f1e6e08e45d80cefa1711dc5afe71e8b77b706ed9c4c118f112b6d304cf7e3598b4e38189f2b455d1482ae54469f6d3bdeb6dec75aacefa1677e5f5af9890c4a32fcc5d2ba5f59c4b68c5d04b2dba5832bb67ace3415b149f8eaf7bd6427ab2576d557cbd328a5af8ef677c7133f5dc0913f4381f727a0fdbf2acce9dd40f5ea296a2b9e6c3a282027bef8a236b61ea5ea61a04ab5de9a9c576cd0f6fab9f6ac5c39eeb41473bf3f9ccdd8dae6c89ed867cbaadc564a48acb415d4f50d8dc31e3060d10d81a06e3167612017efb5bf97da2df8220342727a0330250452131bcc26ce0d252384eedcaa19147df25c87ac210a3e923f267c4f4cc22051b63c220c4e4d8b890f1d026f8100a20d6fdeebdb932424aa473a8c29377f51bd800a35d46c881fa4fe0c89a2445c1c13ece3fa2410484c78c6ce2f307598971be14633a69d7bbcae5b9e91e72ab3c4f88bbffae3b20c3964711f7e00f4deb7fb8770b6cf741fcde2f0305431afe17df76ca818509c5939f90d9079ea95b153e65e3b450b6d43b66add61e320e283bca4f7adb3ae32fe43853b56f14b5185ed1939db5e29402cf3817385fa4ca187176ff79b7643a3547bf05a2bc4c5e8e07cffe2ad9cd8d53506d5c257830b7510ace109f3f4ea46c7594a435fdc1e8e0fabfb9b456aa943e3b36f241e7b9266258b8a135ea95d

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