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
386a7cb77083a3455b7951d398773a81ed9fd8c0be500bae7cd9ef11a319667f03119048ea717ba5540f3beb8fa0ba7fed2bee1f335efedfc6f8c5e470b8e7f9592c10c69d34da25ca1b46cfa565b37d8cebf0d634669bb97c480d4cf07b541acaabd77aaa4aa9a679d9a55f99edb7f003745a0661f8c742374fd76cebe102ccc5b0bc150e43fc4d356e2354a730c31b1fa9e73b4b1fd03300e609c072f8c0e65501b70bbf54ff74f073fe13a97c088324978ef42af4815165628794f0540ede5dc230e65d65df3578126df3558ed94c63465926caa22fc9619e92712a5d48a41a893a7bb42ccbe02a2b7ba19d9377d18027aea88224349855ee2922f1afefe6445059f13daa8985f8e0a65b87b7b6a8313e6f72534115b7462db6fb8981d7ee2974b1fea153cc46b3952f04e63420fc35dd0e996c117d29115d03e438970a3ee38151914ad6df63dce9a13222a9b434a6a2c137ead246e1ad60ad01633684011905db4640c25504282fa2b8bb78ab353afd3a96fc29b9c2c3885c6d06067bb4f852d60b067595ac2202ce2a10c74c50456601535305ebce6303a3523f71294f6004cb5586c97cf35d0bcf89f998b9b1ef9b99896d72969dc502d59570449138ff6f70f3e20859f7938999fabee05f9b10c2a2f4f92b3e6d3c91da8de30cff8ec5b1241a334232fcc895c31a00b64f2ca52574fa90a0b26e9290d34e97aee0b8a26314cbccce050cc1556511d881602ed0fd08b11ed397b4eeca72c5b8fbc32d6f233d89fcae3f2238a1b5eb880cc8e178a902a6f8c36ec3793663c2fff734a542df90320ebeea84b5994b097af98527838b62c647eb5e08c53dca34a0c69fd9e4a3598794571bf1bf8c857d70165435ae1dead17778699553100f9fa03ef57b25b02ef18f81a0a1c7caca0965973933ef4519b75de44addfbecdd65e3ee2021608661fd241e0154a24d42d72ddc92baf5b2ed30e49653cd4e12233efd66f2afe5b45942a16675b34f866bf91c4878c26ffe492ff99bd750639de1bfb16d10e75fc0eb882fa9bbe14d3e1e4d89774e77dc508fa43611ef3b78ab5b8fe7f03c39579371b8990da70e0a2b975c78a6c636710c79566671e8eb5867612a967fa2f4600eaf9dd64e03a6722837009b0df9981b662ffb57ffcb8130bb3feba059bcf5c5107e1d4fdd9e5ca9c64a528965dcb90405d65ce9639450972d1d42ec5d096119b98bc18132653e9422878555c8ee02ac18967e0bce9e2cba33c9e5bf1575c1af31c86c6302019d6c17b64ecb160e37b7ef1fd206118d23c29ebf635fc3e1bd54c0edfc6fdcd17e1ba1e5e5c691b3c1c57cab30cf3a240b1cc0a5c89854ca4392c4f3e9075f35d6e6dbeaf8096d4c0e641f7719d3d79c7e1c529a9ba5711785f752ab45740d74218fcbdfc4cd309d5a649f5f68bd38628a282086df33d80969c9fe86e392fcb1cc5ba1cd424e86445a1cfb80b1f832bd20b9e4dca005aa27ff11ba5687f5ea9358ab215660014c6e1f4d9db72b2fa8273b1f611f461bf26ede0011b828d358f4ea5c3215a26e04ce2233ef16c7c510df6576d58440e6d62b5176245082038421cf3fbbdaa19332889545fb2eaba35ffe23153edb93359a147fad055838f3100814ed71a43b36ec6da94516ba0cac3621b2cc12aa7d89ba81425f5595fba6119b2e5e49302cdef8ecfd022e69283d54e96332a98125212fa63bc2a378102a6ecfd72ebc0e8c0d0b3e995b91c5e2ae2bbd9c724893e865a3d7dcda46d0c2c471bc6fb0810b66f038fbd47e2378168e32a11329d3aff765160bafe8ffa91ce9f259bb7aafc78c546a97931b5fbc5ad02bec4745ccdf36e38595ded6c375d14ee1e6eacb54afbe9d6cbf8f6b6dd58d5242a0d622e06d65c7656501c257663e8bb44c3166c2c10bf8738743a5b1a0e64cee8c41ad1a213b01aeb09695903a23b69b3a1e844cb4b31f517f7e65d8788f46f9fd95355bc51e3b106e6e1c12b5b52798e400c62c2826d7b11f442e0cdf8f7f186af04822c1ce8977bf1a64f900386a76adf8f9dbac3677ee9a25ce0a8c5d6d7920a3d918559c1c1336a656bcd81dbe81c7a936ffaddd83160e7bd7141d47e3c084fd47dda713bd1f03145dcd94be10f1b2e614fe2713b276e427ada788faccc80993432a82822877e76053fe527819ddc6e1f954d27e9d90f9e16324a9fe42946ab3eda3670031daf346c17f39d70bb8e7d4fa63b6c90a39ec3e54f7f10cb57140ed194a726bf75486677cd318d4c38138df5cc2a5d34d73a18319f69014fd024ef78084f17bdb65a5b1b29ae1af5118b100e478bfc6adafac5a73fe4a4b9fecf1ff8fa989efd00a1108a4606a878ac19d4fe989991a667a26c52047e1f8aa6712fe618efef64b108a0d51814e608a94b3866dc51bcfc9f1c9b857075fbd0c4a2da40bde3ae9b084b31e328e4bdec3fbb9acdd69f06022aef859fe3a3f5d01835d0f64835a76f9c6cb2ac1408f677da9b543fe4d20f1ad73e62734c37b3e71ff0b1eafa98c118fee5beff3a4ebcc6be518664b5f055506571f3e

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
f5c5bd4fd8889433e18015ffc10c8b67781b3ce85a817bfde92b9bcd3b8207ed2874a3934a2c9f62be209391cd6fe37ba5ae2e0ba47f042516e1aff57ea3bccfbc94238d8c18984a1ce7c18d2ce3e478068ae6e2e364c40026eed4be115fe0dba2ba053e8f3424d3dfddf61cd2e801e1f8bda0406fff3d24c4550ff2421908bea56bb7ab39c90225a274df4540c7625d42ffd22a59459e240abe406786292d93a035968772e14511efaf1963f57b55f1effc3f0ac8728b7344bc79e1401b5ccbefd1a17a706351cb3b8d8f72b75bcc342c75cc49754c091d2d768a550752e7ee1060888c54df8bb2536c8161db93cc624d5c746cd37f8dd47d6cbbbd122a8f42ce8d551fb6ab791df82bc7b649506d52190d7c7d6d5aee338cd08496aa8cd651da70c2475e3da9dd31cc0f4c39667c4058c8373d71e7a6dfdf49bc410947468bfb4fcde3c53360884f00e5931a4ba467b80bcf98ea9fedd157f1d4719029c5df5ab7b816cb97c1d82c727517a2f6d36a555551826a1c3bf8ffc5dda5c9a89b0d03545e6e9609468ed1291f5d05222b6debf2ca47bc63f8120162a79441bef5c955ee620ea4f5d3ff32d1187127a1777ee10586ba289558d7435520e1c244ad1e9eeb226e4c42c5aebc03dd9b449166138474e30e06a44532036bde9c577517dcf55152bafc4143a50e164d26ec62cd5484a4c123e993742879930bfe36187d704597aeae217ac6ea8dc8b0fa1f3579c08e78e75431855b25a60b50b8ae9468cf99dfc720c3771d3c2730ca930cb657af8263ac4b70854af3ea026a33ccc8462b6c2388bcb864af596f5f7b4a24e39c74adbac7826cd0f574e0634bf37a57d7101f53ab8489bd3b687dacd524ea85907b8bb70f423c688bf371649a83be549ab98c602ec7d9101e8023ca409410b04fe665feaaa555eb253c73471660e7099c3981b007f8f219a469d57471b5aa61f9179f9d58071cfd86f1b41e66946105fbc1acd68a58ee67899495aab4feb90a4f1ed4eeaffd1385f408305b82b409f2a4b4c6bd777047a7b185654b3874b5fc7d57e2632611c6d1f82d85519e8fa12088a8ccc50442090b70e514421561838695e9454c5949aa84af85b82cc48ce19764c13be2c74b2149189a424d762831b24ee10306e5fb11a69ff47a6bbdf4f2f2c46f33d7cfd7f5ce85844891bc969e074899a399adf98ba84581f7146b7b5d661e6f162cbbd37387631f8d6066de2a98e6708a1452174156337173d6c002e750a683a14b96e149d11b219568a429470d151f95d2f9e3b9fb32739f4cae4b27c07c81281d80e81035d1a2851da9b3b6d89c5b7e6724c43deedfa3e018b615c93452ea9d9fb8c88bc1d8da6c17d33485dd3442918bfb7364cc720505e2f8a00605e0011191e2ed31ec54ac3b794bf3df5576fb99153643daf51a9f68b7bf70aa4aea5f67b5b2d64a4c6fcbc35367b39dc90779957cdd66ccc9c4e3305597d106349c4fa41bdf6fc8ffce9f994786d3f7940edaf8b38b060f093104d65622c16cdb2cc189709528c6e3a4cafa8acf5b06209137168f3121033ef40f0a8a813227170c0851199df15ced4f675ac05316ccf5366b9cbca4aa93b0977bdcf40771d89ab7957b5f441e06f461b74d95a5ca3cd1fbaa1017df8871a43a30b67e0c5c5ce6becf647ffe13e27363a6b8d48a05b6238dc952c0816733d85c8a3094c8f5af74ea8151e06ed915e442e5d895bd9e7963d1e7fc1592b65e610c044872b7359a04138f0d6ed0e59ee5a6064f519939e4a1f2965608fa2889f00e603e719d8de693660a905eaf94ba7d6f7ed3c1776eba7b724012dedc1967f57347e46955e4a757d81b3173a7eb49050a7ad337db6bf7a0655cc2375b7e1e81c23b9fa1126ec4cdeb40cb2aa2dac2dbf590da8acbb1bc4f48adb6a9e784194ee8bc632bdced19a1f971dcfd8e50d8e3f79780a7e5b16f5237dc211a0b90a0031663b27320a72de57bfe5165772e319a91fa260cbbe1d674993676762f722e43fe7aa1619265fac3c226cf75966f5955e78e2eabc4f7ae2db914368667c997fd837c6af5ae3962d3cbe645563a6405d303ec9582d0e0d5e084653c37708a91773d210a45d6fc044ff59cbd79bdd78764d64c07ee89b194ec2166f034d45564737de0dff63c55cf9709a4176d2da181d3e0abf84d3bdf09c98728ce8cf22fecafbedaedd643eb5cb0d666058f376abb25806eddcd8d879b7a4ea76bd9090ba217ec8b54820d03294584f6911c52a12a2a91f7498eb507ead2da3eb0704549af95d12f4002094bc2210acf1d29135c3c5142a1ac8b782df4c93ae6d1ab65539a8670827e00395121e48c0e6a9cb108ea9bc68ede7fe4398a3dcb68b43ab98c3bce0fbe2f3cf8ea0328d36e26a2731f36fbbf8f8ce2f15cdf1197e58159a98e47dc44087dda564509ccfc416ee03e101357da3dd274741d97acbab96ba1bf861f74a33b5d5769ddb1bccb8fe4219edfb09903ad7143c9eeeebc9a148ce22619444f253722770c950d1514d83a5dc9041df4613154fcde40ec60b01d

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

Large, justified tabs with icons
View code
f3150e68883ef02ace4a31b466241eb47b015b41317dd5205c8c842e4520338f3075bc75638926eea52a20c70402259f044edb4a276570b94384db267009c8c445c3b708e77f3e673a2c7d0553053eaf00b3893a9dcc4e1d59fd06a9d05ccaaad39ae086056d992deff9560719d584658946c9fdd2ce55e42b037dbd96e7beb0246d64cf8882dd0bdf765743a9ddba45a1968ce914c291a8a680f891f4d8f355313d6f1f8cd13f671f5f1b29ff72b2518d67b76589ebcc39534a178c54207a63d017e3751932788667fe0f7031e2d2be12f4a7488e6fce0caa47721fa249f2dcda3b85d1d22304cbbe321c1abdea164cbb619e835f6c404c37c9f14ddb5d24a74373917de98cf98fad6ea44a68824d83372589311996554cae9ed3cc3818c7fda856a1ab97555c5fa9d49969ea54ddfc18e3c5e650a754856474dae6486bd094062b0e2868c7a30cca3a0157cc2c77c74099d5b3ff86a95c0f98a19ac7c9058f778b78c9b89b43310bf003fa00c69b55255fdd6f5ead8c7e6289e176f957785ba33959e4ef91d860b62a398d1fc56acf1c1d8c92f055699ed7a70cec424c280dbccee33414e674e13016126b227f9bb7576c8f490a428b075a4c6aad66df70dfb752fa558686a71881bbbba30f83f4f10a69f36c6901454b795bf6cce94cf14523d26e25b7c298754e1d94ae4bbcaabd56ba94227362ea3a0e793f1ca8dd7364dd722efada6278daf41485c928078228afdaa27a8e7f4f0aa3b1f5d1f13420152f76e3284e4a6023645740a13133ac5ba2ab94a66489c165612c196cd1349cb64f547ac0486759498157f0af2c534eae703740a8432b5cd0b1da9ce9d43451457c6e18c3d4d14c8a7661301902f419fb60192220ec2fc20a145aadc54f05507f7e5c81eb8586c3301399e1c07a3585f01dfcfd1b060fc27740e0f58b6aa398af8f9ba6b3035f158ae1870a870b66536a5f5ef5e80cd828e39bd099f40fae8f079d4f5f67e35c9117267c09e7aaceeb0ce231ff3e351abb74229ce1ad8c03c6a1866bfd4b0c49efc21ffcf217446552fd7ba195cf4f9a31a704d95a97114ad2690cb4ffc18e10ceef279f19a522823697814c49b57d5d94a15995eaa93fb3caf2dc60b4f1f5cc69f95eca98ba1a9fc0b18ebc33813562dd8b50c68bc29177a23aa1ce81108df3587381b7492907c14479954607589c7637267633bda45446d5fa35b8a285a3bd61482c5d9c5c96b63ac7e3b72d4f528e8de1dbd33a1c34ebd2a929037f012f3553a45f931efec861c7b76e3322c3865a7cdec67bef5977555e4e37a5bd0702284fa2111a0de6b5d7011d62c12f6675cb20b2279e55bd89f69c92f4a86d3ce2e3cd909272444ad57a18721aaf8197ef1f3f0ca9d557eaa1b57de0468f5ca5ac4ea5b3cafab75d7adb0a1dfc4382e69f000e4ed691b7a2112abdfb452aa5c34359657a2250d4e63ba2de8391954e72f6e2405c2caeadd36d544f483a318da0c09e74b5ffbbc6b9a8b8e5d491529e2ab8937a437361c14148a2d658695fb94ec172269d3d0550a5ddf609c1dd9c5f99f847cb54c62d39accb0e850039c46b9005b142c455da0591c87d5d24ef030aef4f4d3503e648bde7b53c9439484557b024933a8fd095308f3937d8a7b36c033086c364434937674efe9a81cf8f6f43c542be6778c580792a58d25d351ee8225d951e0f562525796f5eb279f5b37caebd82274d87e8d7b42f12c5459944619131116ff34b0c05f5d4e74a8029f2eb8fa0b47d0b0e9dd0f233b111652e0fd57436dc91184914f086480ba4af12642d517406d4d81d9be8fa046fd17187fda1a211878ec7688b8ce2596f74e985e8772d91e53f4dc1b8a94c4380f563105d114448b997645fc706c006305c5ba3b05b1aca22d446cebece09fbcfd0d95243608e7712434e1149879b2c7c62c893a1cbaf25149ce2f85a5f992368a3c04aa91144a1385c79adb6b9c66c459b309d5eefb7b9916d46b5ac97572d39260285df4c9c9fd5d06c6ce9fe644735433c4ede49b33d8d7749902327b77328179ba1e1d0263ff04e42a08ea562389be60fb6376ded4ab9f55b59250a70884688473ff9b5dc79e0f35b73acf6c0c9e909d22f5310ec1dd8e9a0ca718f7a81d2b0abfbaa3ff825b153c010cb76d183aa2ba10da2e49b0a199ce6782ec6f3bdee7253e32a3aed514b7ffbbf877f373b4d19ae9d031e52e972142bd193af6f5b0c5f1f435371692c0317979dd4c565f909d42bb2551895838ebb876c004f8824bf594d321f5bf0834e5f459418142b1c50992f4219160d8783739d8506883a2343eeaba1dfc25a70de9500ae0afd85129729e68be0734971d00b24ca424f8abbd8792b70b16cba12f2b4e689997b24927718b56db5820aef377b054b58d8ae2a46c30ba3626860922082f4f3ad6d4423909dc450b52cf6615cbf32c593e874f1f6976c16af6e6c1d8996963505161d69c2399092de81c83995c7456cbd73667f0abe87874be5d2baaad6b827ae7f6b20429d580ba1186ed35abd1418f82b1e28e463eee084a7f5a538ece9835fc8cdda0c8715a3862b568f05b96dc7220fce609d64fcfb49603e400eec362d65a5abb6239e3c7a275283a40a112376d7669b09dbf7b0600410a9cf9fb13eb8de099c407dd6398fa4b11e3078b7815a471bec658d60a56aedfd02f4cf12a4a0f9f7f08f627b2ebba0aab3a9f98ed8b86ad67250576654ce20173ee4e64d74fd7299c63599bcaae0cdf5bcae1c1af39730bfe1bd487bebba17552df531b0987cd563ce4d3a928ccf7b2e095b89596cdf4f154df6ce075c212837fbba7dea3e1391cd47b2326f427c769e8cc8ae62e1da0e5aeb7d198835f70d2984848d5a02c042fb1e6cd7b5a0330576b455d6bbf26c6ecc59011b3d81caa40bcb1eb0ce6764aed61603589c7e62322081f5e2ca5fa3dd3c6a2d8bde7a9a988bc61676b2755bbfeb3affb9c030f5f8e6255084e72565dcfed2c5a77b1f2a00791b7480507f0ee3d9b4190606ea9c3798a40817a11c7e10502bda5a32315096d27fe37db340d22b3f7ea4650c74b4ca8b4917efba278d7a878d71cb3bc1cbe7d18747e32d7897a68fbbcd46f18395af5f5350390d46b62344947025270e0ca4cd66de216e462ffe600f5e565ded807b13c3a9bfaad10943b702c085828040617adadfdb92a988d49245aab4cd39e678b80b710ec78c750dd6ef409d718bb1d004eb0c443de6b27cbb87915cf0ef55d0994fbc33e0dbb83d95e3835a1bd75ac2f8b875fd9456b4244c58553bdfa164f88c4b0ff6bcfa2094d574d2b8f706e642d3b2db65b67bcc68c097d47f1905ce02895c81f7e32ae1f1b0cb1f9eba5b1c4187f942fd34b4023e7bd72cc63de8bd1b67d7bc430fe25c1e17e6c3551e7c2d3ade85db898fdbe7545da6ee2ef26cfe7de5e99860e64094a6013cb0019258b3128d8bbe4f632f96ad1766089eeb5f786c9950651412eef9092f26909317c7037ae0993ad501753d9694b3579eec1a13e13e8cf3933afaceba40594f59e18376afba01c33d85298a56de7971ecd3ca96e97f80a5fa8966fe9262717c9853da194db7a13f8c5208ce3908003c848db0054756afd787fbf02d09506e8d0c7e4f1c7b105beaefdf8c9e8e653b72621d70c8602665f9bb3500e477c0e0f3cdd031fbe30b221f9fbf8769d0b0ebc1fff95c7fa9d7bde8ced42369f14c417ed0b367da98d379b4c87db97e643c532dade22dd4d09247a79fbf10f5434bb584fdb34d882ff263ef517a1484e13b89f75aee540bc9da8035a35e7ebef6b56da7767fd6a0350c462f0c4a09ad23654c9c7a178049f0b43fc9e2b771072b959c87c5bcc80e5d523b9e68a8d86e03131eded2f8638c4f20c8ff8b71b4d64b3de0951e5eb46b0f3c4e00631869b3f23528b82dcab7f6600af2f98a216ef086d78b565af9ef1ffd2a86d57037cda68daea33bd449901ba94786fd57563bfa1e84692edbb4debdc695958770209e8af4b036ed90e706eaffa7be837ed73618e50a95d61e87de5b34621f9cbbda3c37180f2fce386e234704352563f4209a653c8183eba5721232f7feb9c8e5c3b1392f251a508598fe379027a8e2bf64217eb5b8f7bd4b87a45fae9a9a5e89c49c039f3745b689b58f8664fd78886e7ca9ee09bfe603169d067d3d56dbd5e440b14e92a606a988ddddf69834b80776fcc0ffe6db5f61c746ba94fdd395349b731afddde37f5aa83ec169401872b7a8c60946ab74002cf7c576b789265f23e44c90e339803e659ddfbc2a740a4a5058f8fef31408fe576eafd2efa7a77947a6ec7a519a8f60524a9cfc357223f67de14ee5cd89fb32d643ec2a19ec61f6a0f2c9e6fbec6e01fc776165fa12843ac96cb6181671d83797b6d37824b3e3d4e1eb4464d2033cd07adda69728340ab17a3045800b192a4dae2a88ae07c82f15ef49aad51ee04e70adee9aff91d8b8153b3a36419e830c04fcab21f30d00778a69db323bdf620c6cab8bb125198207e8d51374130cb6e111a0c6e2414ae7e84f97b89091ea577b3ac56fb0ea1ae482ba974080684046b1423f07330747b3eaac8b578dda4f456766010d5965c61ff59bfeffd10c1d778360be13bdafcc089e05e7169b842149acc5710877735994238374b456fdf89c55ae772824e18a46ae38479c66545e43500255f5021f0ed0c35abad44ebc7f83a9f533564ef16a4acd21a6b591b7cb3fe81a168b7395dd2a463d1e8661d422064de9c7738124aa206c5203c84c7e8316ebbeb69c22fdee2a41ebc98e563f093490d201b441ad73455a63c02058d537d13fe375efded6d81e10d80c7c74ccfea84101a890ada2554b788a8fd90886b69dcbf0e6ccfec1f0da24b1afce8f1db158bc33361467ee3236515106bb50c352af004d59366b71f72d1925a244a7ae63c82d6ff2a92f2a7c5ed73a21932d33de2d9023a4bb1da28fbfaafb924dd6bc65005a2f32a8164c9fa1adffb350d09d911539587211ea7ca2e33ce78bf300c59b29e9d135e807deb2bde1a4705206598d1959737b7aeb327af71cee037bce744a71e800ed2c89c5aba0b2b7cc1eb971c0e34a491c4219f47e7ec9f88dd5b0e53d237df86a4811a1d6d85f9cd87911d90115373b49721010ac2761f1f96d7c404c20090a34e2ae7ea1c6bc982bf137adcf7546bd9da4a68614fe907e113f7a6b50e5942fe5765f4395685547859181ad93ac8ec9385f6fd32cbb48b0b64e7852ab4d8db2ec37781cc05343b6f0aca09db26eaf0174f659756b13ded94d789ec856d40117ea188a6722acf17d701255b9a7734ee242629cbe6a820e0a5d67823151c00221e3ffc66477299d0037dfc271e5f79a4e54962f268552fe1c5bc1c376ade5184b6d4a5c2e498b5b9403dd5e043fb58c4a33b756db273640fec5accbe22e8a83ce6db6a74fbd2bc9678c1a4db102adb95a82b4dd82515047ddff71fb3aef52cf3f6cd82dc00c3629d6bc19c3daad3d92a7d7b7f96233ae56da01d157640c3d6ba96f177d9f380ec87bb62d3ef4237119836122fc66b2b0baf081b68456b937dfef9ddf5d3d01e9909510c7ef64146ea9906e8c793db9304b6513ac284c9d707df2a97abaa42dde4370bc011b023b98426172a62c479652c62824f169a1236025c231aeaf73f88b66393ba6f3279ab9924796bd5909e72601a6b326e6ec1c3a91e7968bf419c05e68514b566978b235210402ab671e1cf4c053c6036de420fd2a0b1f173e0704d84a4aa3c8ed31739862a99c4371ee3ed21ab042383c4a90bd1635d97cb8803dc6ee0ab453e7731eeaae7a3b2978ed8160137a9959d3e21fcb10dec8e42ab9bb06721ba390eb5c36fd12ee03ea91b7fc8e68897d9d0cd25d3c84a01c4165f272948a3cb923aa49079698adf0bdf8d446f7031083f0e4d05f2b86dc2c3834154869053b91784809aa9cf4d32cc58001c59df472942dd2225f08ef1964d805bbf5a6f540646fe1a2ec6cac175c8d4d457c41aabbc14abb0fc74cfb55b59003f674870f1b3789d159f8e939859173d9dffcfa14cad8b201db53fc5fd9d964ebc9e37bdcf82f0147f7bc4a44256700b183fa84949f6b29b4c6261812812b7039db259a8721f717ac7c9d16d4e4e2e83eb393c4f8d51074860f9f922658e061cac5b6fde0cbeb650fe574dc54eb7c6d2e7f5ed613191b48e2f5671b57180a6e0a4241af8e60596a54e6ad5779b0e035700a88f14e689d3b2dd98552c12de31d33d950c0a1a42c1a73f130f908573b0241381dfe9df886744c875ea9142a216df35a50c0423b31093a3c8b26ffdaa813217d7879a2d53ff2ba146245f9d8ef45691eed9de672787af9ae0272ea23c745d9dd97d3c6dc1a04b4a53315adaaf175d3b1e52b6c72b45843a0e7aa713f3c78b4cd8fa89eaacc9eb3acd0e99f0493170f77080c1f1e7eb428580ff8a93ddb9029f3cb4000a738f5a530830131d2077816e5cd902a50b0412bdc3b3715b8de382a7e51931be95d46a05dac40b8850e8fad2aeedead11474f1ef2bb02a557bf5f5dbbfa9748f1f65734826322ab5a80cd43d9dc73157bd828817906acf02ab31ecd7927106db354625b13c51e5f905fc56efc7878314dd5c14c0c2ca621b5b9bc2e0a7c758398e00bfe641b343d99e1235e8f4098b0a64fe760d8e4a93eb867ef4ed2b73c3c62ddd00e137f182a47f3f4b2ad00e78d49ca507e8188577a1814427773c7d947cc94ab6c8de8b7b16f263f50be432b43c7b3cbe58afd56964e3250d80cce18ae0e4a9d9c70f34ef473247e6b62a814456b16908d8d7604c648a3c93fa8abc3ce341c6e2bc191a45d31bc61224b36a0739aa244e5ee86097e717c8c5eac2919c81bb304cbface8f9f8e924dda1acdf75213b2b30bbad24e8a92a4c407e441544620a109f01ac221a0a069f5a7d8b14f215366e73105018b14d4b547edffb4a3f8602dbce1b9d37e315b28a178565b0be4a77945b622fc071161b1f867c209aeefacf42de2f8d768b981ef2f5ad83d61f1d500b02347def80c86ab75e2fa9149b743e5223035d5c328573ea167e84211e31c48aa179a718fac39470a999298ba80129ed414da00aed3a653ba2e0ce3e2904cb7105e4857965be928c4f7d4a4ce11eb86b8eb44afab2b898039023aa2e13fddbf8404f5c10e12f96ac9ae2fafad73b18cb1081ab8cd75c8805f736c58f5fbe9c2964b7dd1791f3ae52d38c782c3bab193d3625d614a39e1b0cdde97899cb0206dd1479e4ee930fa7d7b2316cd40a46d6bf8a660858ae3a5d8ea1218f76200b8e4139ffdb2184985da5818c0c25fb8d0759a511abf63181aa43a84a7bcdca3f5004bde9146c9632e09269465ab8a2bfdd8f607b100a9af983343a415a7214176f5faa11a41746edad9b13acf3a7f00ea3040be795734194cc208ae4c652d15beb293ad98567197b925a31cc5092330f707602df63122befb34923f1f5097d2642f6113b6354408ff155b0e340f997e854363bf0989a804baeb9f27d835b647d1256dc47064e8c49c85313281fe84ca207ea10432c0c791f5ce5956c564b7d9fc62447f30ab6b9322e74aa401ba06e13c3d325adac1743a71a101a6abb947060779efbabe14f182d4541ed037e63c6e803e005774a5d954f5b3d19ca9bf8895d3142cf5df3aa9e7d9299cd0b5f3319c23a45d18d0465437f1f970c07fa57f6e77a1100b0da2c0bcddc2a97bbf44e4727fb32db8df71e9ea170073ff9a286146bd81802103ff27feabba5567019ca0bf40bc7cb3310bad7a32005cb0415f0aaa91168c1e6ad3ca42f490368c226d4aca31f255d7b6eef72974dc7327e29cbeb9b6376e1eb80d8af8efd824d4fef89489d44e4fc100b536f93813af71f80d081d5c1c72f6a96bc94a52590ba0cf31e67466c91b680a01965eccbba9dc23a4c2770e4dce52d02a555b52907c39985f91cd3850c51b0046922baebb8a153de6dba09307abed1cf1447f9d951d3be05ba29965efe702c691895c08e922806be450c4bab4b198547fa6c92a078e4b1cc9d7f923413a288fa09d849539cc4d76665daae12862ea3308659b070346dfcf35f9c6b379dc7b7a5da673969bed27ee28afa7fe94767c1abd29fa3d463ea14c5ad63359eea14c34a1076ee8024862aa528af12e4184625c357be644df8e9c96ba43a77a860affa231e28e766f8f6e3ac66b776201cc7ff5da29b9edb19941e6af698c5d62acac5a61f7b4c9b841ede2380eac6651f93b2ecf61e490b984ff1d3745e709bf11b6c403f176463e37dbf38c7e796ce0b3736e00f677b9ad254dcba161b28d3aeee945aaf9b5c893dafcdecaefce371d33c61cd40f9042f03dc526f8e68dd17fef850c56100abb55a7562a369a402b3563e0d130b82212dad49c05fad075f7b9b7372b3e324235a5f899d656a61add3226f9cab4750f4b1f9c6e75465f3a715b3b3abc518a504781d2c42f386dfea458712bc235fe9461d4c9494ae8a9559d029e72c746672a26d38baa0b0265cc17ff8b955b8abec116b6e8a05ac32ea29fb6371a7a506ea9835c6b09c62f70ead425945b7541a54d8cd761b536a3259f3d258acb256ac0dea3b89245e1ab0948166262fe5ed569ec0e9dbd73d3a263473bf72a3acc3604142f7b10a16e52211028819733a061e96f2f482e341cf0449736f604db2ea204391b01ef6eb317c00c95c974bac6a599508e90da1b19a0a713d013c215c5c4e55c1013e5279fc1709564f41e28e5da428952db2d974a474ee89f2ce2110a639e8f9e90f1a210da7edbd833cdd174da049c1a95273394d5ee302e0bbcd465ab162820cbed43af94d9fe3f8638b856c1b8b3018edaf00c280fba3be4d55b498b46185f6652dbcb02e4333313572e451d5e9291e84d8f9ef612718d9f8bda959de4e49113ee58da11895131259a9221a3f90b35860f2eccdbc3ea1450cf99213fcf2555baea5301a0f9280b5b18fe2138105ee91b6d96b1221a62ad7f84fd0ec735e2d53b437aa712cf2bc4b4163b7c20580a8bf0fcf99397932438e93b11c6ec4cb8b27af7a7d8702d820dd417ad8d301b458969d64b14428aec0089fb3c563cc13a728068a09b07dc076709c4972c91df656f46116c35df1a6b68a145a0860ce1fab701f2fb20e74dc17386a44dd001d8480920f4f0e1b6beebcf8e31c96d15c5175614a69cc080a19766f52aee64e7f5ac6c25e8ca3de9b85a4b0c62221f660fc83d8bfedfd95879d1dc294df1ede28a67f83a383a994458205258929e5868458e1de183dc9d21d10ff16c53c6f5b57daa57ee8e49c5e4efdd2398683aad49e0a4b6aa80c5a29bff468b2a7a10213b970f124550708809b2830f59c19da40dca6fa4fcd73ab61798f1417eeca9627160e1866c61c2af12dee517643ffb0a819780bd5c2bf401f07bf03be73de540fe60ecbd5836c06d074569f369c7be9f60dc78ff9e2b145620059fecfa000b29a0b33b003504ccb064ae2cf7d28f003d0a2eab6a96a4d1dfb3a261b32306a3dcde7064848fef16f6e09b71491f77142871636a67f70e75f5c3a8e45745851acc535fec0e51edb29d1824812832cb98f86950bd668c4f585b8086f482fe88e2bda0b5a2224e73125210ef84f8ffc37aee97ed2cd0c1e71192b43142fd4ec98587e5526a86973d12d7dcc9ebb089f81288216fd92e2bc0d285e80616b1cd1cede96a5d09727186fa9218f1d2d1aca039f73b05e6bf5dd3b89b5705be3db87ab82f643eab397b0e6bef72f2fddd3ab55c9a7fee6730013e42e4e62966af1c57e6fe4acdda7589789687fbfba6fbd698f5f7650f696c9b8b92469e02ff22db9414f12255277d10da79b6ac6e500ae8e4f4595833f659705662fb6684fcf7a10413303922a3172f0368e88e4c2ad1e92ef858cccd2668143f0af4e1c71fb47f556e999de7af0f9d60cabffe3677367b58e5012eba58a398f517cb600346f48b4491ae19e210817b4ef732b735ecdc894df06521e743a696e6ba050d5959fba425d5ea91ed8d150f1066482a9b39f50e142e5a9991a6281e843e0d1b0b7f3ef607d8971785866880d263180010102b13317fc02be41955c074cc954cbb6cf9211f607b042a36b77c9828ef35

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
74ecf77abbbd826ede7aaf15e70ae0b366cbca15f9abee2e77c6aff64f01293eb5a8cca9c9074b75636ffdf598482dd659d78c351dc63923864b35b3e9cd0142122d0cdd806dc2540d5f8ecfcd29b1b1a39b578583d08b8f8c3551c62932dc5f2001faada89ecf064e5f725d84de94b859aa634a88e5e35c15d589c8477371af4c9cee9d4bfb4a79fde6c627e2b7efa9ce3b479eab67804bb923c1676b3bc1be36adb9124a8708ac7217d99216d64d42de947ed103d65cf3e02cddc914d79d1ac8407d3f50c943ec5f381fc27614ca0bfe3a042342bda9144306d4f0d94d6489d7892e90bb3e97fad1a4f10e09ca3737aeb621647a84ef9bc94a410301c8815bd992312d3fdb7130985fb6f1995500ed0f0095420ab5c7ccf8c3574b48a10448de0911e994134d1d3ea33d0014d75c5c8b8d50f02cb9c6ca58f5c88510de2e1de99c691d6c422830c01ea94c19fe81bd46aa8578eb3b266c9a3d7d22e041a4ec580810fb790d9b7ba02eb9a2a5c28c58c698e8ce87fe0f9083b9493ca7623b1736113b07754b77c7c553de1e7e67beea4bf4be937fb5427bdc1127e4cf434079194d8bfa1d6f833e5c8bb751956436f6a02430f8cecbfbd6248e89c52b77adae9aea86abc2b8f2238ccd303dbe151bbc1de226a8578084d81b6dc0cab31b82bdfa055f7f76c42a54c620ac6309a6f42318c8a83ccd8cbb644b361222842a6cab60424ea0521d43b05dcfb03ca9bf88a53d731ae6248fc73a8745493af61dd2723cbc2f8e38b69353a052d691a76fd8fba4afc85d15bf3e21888f6603b70d8a1c970add9e88feb3d9959f64d8ef58d7beef6e8f95d1b02019055f1ac7ad13ae381af05ee53ce876aa7478c494de9d5c776fa6d259c53d69a9c1c869066d4dc011d015d878a105d78f7381d9d52f45a2976106a2bd9dbdd9e934b4f273e546a0409060577a28216353d22fc0e95f88f5c7bd99da353c56827e3243658c6deb8622190d0a74734069c5f583b62b0963521646737e5d4cf153b5ce0aee3f878c595a57c248cbc49865c816db556a75f254ba97328ba1aaff0ed60ee76df0bd4625053ee4893eed366a96ac56342eaaa8ac325a4b6171f264ac31634efd9dd6ff7d2adc30bc18c0b9f34a09229b8ee4101d73b234c99ee7a01bd5dc0535e64ed2bec263b285c01aa9853ec97e2c1fe58d7c49b934056a0aefdb55f472047b8198dd134483cd450d53a60bc0f86957bba6d78b4bdbb4f21c3f68976d17b2b0d61afeb22dbb8111f5da0bb1e106f08078c64b8dc9aa1fa41139dd712090ae53857ff086d8c87c2a42629312d8cecc156da8e5c62ae04130430c16bed3c0f4318b8f4178e2ea9aac8be0219d7af5d499c823f658df65fac1c70c80dffef9c1e598e84390ed44a5ef9a298fe292aa3f5f9301e427501a5ab2db93b437662039f1b9e4137e8dd0ef737a7b4d5ffd0fb5193371f538055383365d82db71a30528e7c2d2c434ca8d9deae252def84c8bce469f71e5aadca3d619b661d6351e8c03a2cf5bdef2ed73a240b74e860a4fd8a488798cf78ff865cc24dbd7db4dd2842eebd89495e6bff427bddc3fcbaf78b0cdea6a2b0625de7f306e84f809053f2578fb2599984e0b9779841f764b805d76066fae0c01872069bd675adb2653e9c1c74ede4725ce4014bd84897e9b2145726be574e2d18d023a4a9a01d72af69b886c75857ba0a5d63ff8460c542e74afbe074ae2497b5c4ff7a25163c6628c5f998aaf924e885064a9ea8957625057bd5857b0eba78707ebb669fbd6e227e015fcd0771a94a9dc3656245ce93713f29def79daa8610642097cc1e15d57ff5fe70bcd8122a5165af417cca36b5e9523cec947ad01546f10f56de3ec8933ef2f2585b74a146ce051cb1b302db3f44e599a94b0c3026e8600cdf474392551e6cbbc23b926dba99d105ea99b26a2ec5d9dd3dad28e0eb20c38d9fe7940f6acae56b71c43de43c086981e4b5a853b5a65cb3acbf692a9e3e5e7b231833f41981b4afc70be36309bf7aa50b0cc6e27c00e190c1d10ee444c07dc0c8ab412020742cb32f643774c2173ad117991412daae7cd424f3ad343b5cebcdb7e990048a2eafaee79a5ac76b6c0d37270bf29bf4b697f6eecd19c1589d39e1a2bfe0f973e32874daab9e41c61f12afe5de36f80734eba9e9a90161c54c1f0f9e087232c3a880f741b518e23332de9f3370bd9784cb647b878864e66d15f1e879566806a2dad541bfa64eea246ccc826844a7bc6cd11e2ef7526662727c9bfe1f00b539024dea81fec5e2ff7bba1ba945550ea40ad87bd223b17c34c5e4c2e98bd7f813bd9a98011ec02a6bff3e3027eb305c7f1fff39417711ab2b8984cdacc8dfb24304986b1b979ff869d2fd00968c598e363f9f07812ec9206c3711b00c8b85c3b0fd64bec508e37697636aa30e8348136a0a0afe7788ee604547cc544fa4ea481e87f74e62f5216c0498532a363613943ad1acba387a973159dbfda8f

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