The default template used by the Tabs extension is simple and responsive.
The default tabs template
View code 9d700905f567e2c04a9732c681b153bffcfa286c2139b08c4b6752cf4784c94eebbaa807b06797c9b2829a363c230291a53d914343dc1529eb4c40d10a0f5be661ba508836544ee99744415085660211efdb3ec37f7ed2580ecc596b473ebd99834540c341c5d238d5cbee1f65f7598fffd863eaee611a7e8ded6d2fe20fcfbf5ee6997ef51ff6b9e8b29474c9e294cc3bb432d588d49ce94a21d7ef715d46f441263fa1e50318ff27fe7dfd0fd46e18fee966dcb5bac3542692e88451d8e1d57601f9e3f6d790abc426f015ac193b3900fa00cae6182455f7eea690bcad1d4e8b5b0ea415b0e475003e17c260d5eb7e4af7b6c189de091a145280288e73ba6c6757a0aec0ede38e39433dddfabbdca5a749bc6d78a987705d13e60cc37beb514c54efc5cf1d995eade4432e6107fcc52a5eb8753be0a0e66119380087a23d33183bbfe593fc8d4c83b2aa60083d95f6f5e859458102a2dfad7e5eb86c5a61d9051eadb75e24fb03f975adad58c70e541e095c5506f23c98e113264c18d3eea0d61d4ea8c960cf085de38efc3efbf1993e00c415dfa1d4a4c7b8ac60d28395339d5d75951a1c2b115f6e5638aa55364ef413da338564b79af71f9fe7981b5caa1e3fb5af046ba7d753963524c13a08d5cfc5e9d4573e15daf0323a14757f17ff2a27e0c3b6d0797880bdaf4b3227843b2a775768645d52ed0eeef0c35ca2c77fe88844b1cb977e67dd14a580a7ac0bd1a673f4f59d1d30f72ed1cd8e54ec4324e816821403ea55a29e93fe3833e1780fc8f58ae7f4c1618279fcacfa438bac4513da1a906a386f1ef911e22ef2d0502e71442d3e2994428b7d98f35ac6196beefe702554dcc98387d28acd26cca9a9b4342b6848e1843dec51f1da4d3a51706f3461bd630417663205a1b5aa284a29bae84c28b5b2fcbde94dd1b7cca366a4ba06e56fc40e0e61ba5c67201f3c572570a8f12eef011861c4137e117775d90d88117761ecea2c4e0f3bfaa4a00d28e1f402dee855f1ef8281e25c17a76f3cc98e5bea548e4cc173fec6393e61723743765e5b666a5326204582509ff7b4205fb55fc0767f011cd36b5cf7b043a9bee903bd32b83f6a3ce89bb3cb897ddf5287f49472a46dae7bb1b0ee6a1c394b9b3026009265c4864745f0218226c39e70aa55cefb659e567cb4e6b82699f2655abe4d9cd281d9bb452bb33e7d45d1542d7bb57e870709b8e4793723d24fa99d1af762bd5e77857d9b1e52e69b28187f4ef44b92eebe284b4a4b2c4d553b73c93fd08389e48e4a53d0e35340524898b0edff42de4371294d349ef912c46d13d7f15ab5cd50d6134a7d515842bedbd9a06951e0e9ccf28d7e4d37e04a9daefd9f7d5d90eabef0c1a3136aa534523672499949f5ea5f318e17100931e7ebb9feabe481b8c4993b1edfc935ce2f0544ae1ea737653dbf70b53e0611648c4d6b21469f1cbcf281aa3655b28882df69565c9f6f29de6d6fb8df7cee3d44a4dc816ed3d0e2348c134bcd4f7fce580375d22456046e157fa0b57c715e345cc05005f9fd40e896bb8952c09ec80ab8c564e92204d66367182c96b1dbd2e8cae5271d7d6a28ef11508b286f0449d54dc2801e32131371cf5b863b7451f3344fe7f9ed74c1c7062e167ea13ac5ceabbf13dd9971372ee1e8e83021e1453f997620e667b03d526a26580100d2a8d17780948faf9390e36fd491e51e50cbb45bd085f6a9da842559768268665fbd2a94e22d3753a274d32ef889ffd76178fbe07611d254a3a714721bfc385212787ec2d12b2b7a4d2df5f6c0415396fb3a8e51d3779eac835e0d9a5db5b61ec122e10db1c04e7304e92f91f9e54b3abb7932e22f7f155d786af350ab62e862679a9b2087d2d7d50291881681ed0f1d6fb850063c39efe901071a5ec910124c89e21ccd1fa6cc4bfb9b20cefc271f960fb8669b9a1919753b0c202ef6494fa2d9c67c8c620ca92e2420a7c910be6a5871c32c427318a02c09c97f276b3d1dc6fa109ba469348a5e447c0587206c33b138ff03c9075d71546249e2b6c076ef74cf694232731b57ba3e19a996c0f4ef048ad2ae4a15df50169f41ab9c1d2356294455a00dc0027859a0716282ab88bc8178d4bba53b0969e451768031e37d658bcb9e00f0b51233576d91d1d8caac26be150dfe277006e782264f457a70e3d8762fc6784a6fc66163ec9721e13b3302fe854e9693a1bdd618bd170bbe3367d05ec015ee74e7118ed5a98267fe32050aecd8383dba7cdaaef2a02d7ca62fc48f5beebebe59c72088447823a3a6c1a650d8af1e538d95366d0a716c0004160b41a726f9b7bcda7ea8e3f5c8ebf9f3a854194783a0328b190eb5026d4ea7593db88c66ead4649f7ca1af3b54bb92cdaa0bc773681f1a0faf7ae6f92686656574a03272b6f6e6bb355c50d55163b99194cdf7013cec4ca10f4ace43c31ded9962b06a79cfb838d2e9e352a25d80717a02f67a47f80ca1900859b31dc0ce63c77ee08a164bd9e1b18c02ed1035554046d8dbdada37b5b228afeddaa440596d63
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 0648f195344b1a6a059a29a4f2beb0286e5bac3fc215a6053f64ba340879264906ef76bc15c051a039464ef6bbb356bf323eb02ab536eef83c5685955bde9f194a6c055f64fd3179a552accc6340f01acbfbdb4bb9e77b3a5e7fb7dbbdd061c8ff816b9c93f0fc94ec54f8b396d90460859ebeba99474f5cabf5131a6dc165043b46e85e507e76ead1768069435ecd8d664eb47fe0d37bbbb8f6514fe00d5fd7df5c673686919e935cd47ce4b36edca3221735b44dcdba1ac0a3ab4930fdeb82c5b0fa2c4fffd48ed30e2fc45c8ded007ec0f59e797baea74c9493c0cf0adf0016f0ac4443d899838853500a3d50746dea827086067f4caa313b8176dd584c92e7d7abc517eaef777410e1b86c8600b511fafc9c76512dda9d4623834f0f5447ef8ac676e43bbf4fce22299e197751bbd9893e9b5338b13dd63a888e60ad1a7c5b230a9c34e2bc8fe5b6c56e3c09a34ed40c42eeaa30d89e57051c6ec3734d5ecf59c8090e617bd908bc6182dd49a6fe9aeb7dfa8f94e911384856168fe0b7b2b2a1d001436fdf0e743ee7bff8383e9c88202ff5b8fd737c1fb9fcd53693f5928410084aa945be2f43cd19cffee818d2ea7f25060a9c213c587a723cfb581ac59a75475f2ee2818e772165b9c92d522463832de658bef59679f2c9c71a18859250821b4092d3513121fceccd4c4b1808dec3aa81a774c85a28333e458e6da922087d3af24bd62d357b90c4163e23120484cded20e760d0aab7d8ade849f0e590e7322c749c94838f5557fad5c48fe2f6e6db7a0d279e069d1313a5e3343a8b7cdc4cb99e737a1446fd0dd89aa5b157aa981fb9a943ff9ca7773a96dc8a405969a565d1f0552cdce1fa1d32b5790174c944be5d3353dd2c4955f5439deebabd60a4e37088ce225a4a011f7e7e989f2f0fcbdafd59341f4e8ac0913a22bfe5a7c46ec57f616b376933ede674b9cda3dd856ac25b6840bf9ddfcbf975fe5e75fba91c136999d7818be27382ab2c23a471d76ec87a5d5588c2be234de85e6a883ec0f468b7bff636b6a8e2d49653c5a6871fbf4bf333e8f0a089b67e26247fae932bbff2f91a890b6202aad146c884d697124a6d35c32ed7dd0b135a5dba16f571a30c773b182d05825f1e6b51dc4024c96ba3822a6f85135baaeefb9f167a1d9bf530502797b75d38a354ffe4357088341d1af926f76cf53531e5901bda6f80190b80321ffd73b9b6409f23a78e2d11743e5eee7f7b4758c049e02178cc23ce17d168bad3560ed9bef1ebfcb931364f9a58ec87cb88eba32bca8a5d5515203e840285028ee2580aac90147b478d26543457817ad5672cceea4d7d8867ea2c9c9e9d295086224fdbc9b21a595e7d5b2c3fa034d0b92df54749ff46b0151ef81e596aa6730d9353ea68db1fb09ef1cdd6591af8f8712d6f5fd28a9d8725c53f05b530ece2ec18b80a3933fbcf58f4c164df8b848e65a3dc3d0040a61d484d1497826a7fdbf4fc921ab2247129be658f3188c4d226258bc4ee8f2c78098372f97b6a834a0c84573e66296f5608360c11bc8f616705411921fae69ca320a531906bb1d1c611399a0bd4c8714eff2ef45b5562c4240d8f4bf9b19dfdf1e9730b4915fde55e2e6c13eace91b78db90c256dbfb9cc127d48d5a914377e88f137860fb1754a715401a869f495c1a077c7130528181be4736c8fe365e39dea7f6fb9639347b10e46158d3a5f3f2c83998a426f8beb86b576e0e55473a5c4cc95ad5e8d1084c0ed18b6980a425d59dd4b8172e115a28e75c19b1386b6130bf6ec15cf728193ed51c84928bf0f4356ee25b9fda0276479db56c31fb1cb256711707f7d058a1e203e7c04668c1c78e6c7db968dac6abee5803a8d4ebf69a68a02f4aa289ca6a1e13229aff7aabd6a30573c80426036456d5f448c3a85cae93486f795c72273c1778ecde2f34f43d54526881c4bce2be4499abb56e49537dafc155ac5c7c90910ac035d68da485c70f7992a248044028a839eceeb1d1f71d7f5f7b794ed6eaf8951cbad7f45533cc659b3ca062c32e9c0eed374b732a80e172c4e3eddb1e35e05b1831b367d3a44a600bb02b66e4bccfc6936201122124c08c8659fc68ab2e0a1c33bc68d6241a2cdefaa0181b9da2fdabef6625cfd4bd2eba6b2115b7733eee6c2e8f463ce254bd27822be2ba43950eb7876bbf9aa1270955856c83c85fed583350cc0daea2467ab2b39204222c7a94077e05bb5a92447e35ee98739471969084ad235f9de9585ab65ff8a4702e84bfb0794b8a294bb45cdbb87724d2da79eb2465ed8489d79e631ef0346bafad41acc6457fcee3546b120010f956024b76daf9cf7f5b5c0ed660445fb760d02e91926b0efb53bca5ecc55cf5759fc4fd26d834ac54bfb0bd518c6492ec592527f89e0a98bcb6880e494298683ab180a89e10ed4ee5275ab41d6b6f83c352ca4ede6c9713faf4bb609a77595d1292c6d56edc7f9dc62511becdb5721c29c335b6790f81db3d10329941bf8fc9a27364ef62f08883e90adfe0abe731d3918c6a2453cea8b
In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).
Large, justified tabs with icons
View code 6ce194301da02e5efecc1b76b6069cc154098deae9acc0009b9b3f7e6bc6d0f6310980f0671acaa5ca663507fe13d131ce5e83837aa74cc514d844c3a3e5b827b8b2ac437aba7cba6b9a5d5f9205164df5887bc986865f4891afdd8ffa6518d57e0714ebd23074d4d834073dc4eedb9e569b1643552a87a0a5200af3e0f4ace94f3e5438011d2c54fd8ce8526d59e4cc5461faa02e8ef7030d5f303c20ef5c1a1cf9ccb2bc4f5c7c468902da3e0cff8a566b6cfc327cbbee42d0528a970e40ef77d7271061edca13723ea676a00961ed128ff4926dffacf6add997307b081472abca5b87a1e81fe62c22cecd2367e6e7b76db75f4a0711bd2c07eb156a5c320a699796be7c02f876488638eff8ec70ea0586c222001248add3ad46e44b12c8fabd9b2e278653a7a5f1445318f05d9bd2de1e427836ea5b72c0b62311882243043396ab99cbf538aa629a016ee6681e7a61c2df5f5c13a90fb5a7135b4d9f5ae6c6fe0aae055e41676280e1009a9c586de7b918fe8cacc8d944ef708ed5520a4c01d7173ccabd61b8bf5cf56c3ffdc0f9e2bdd9638fe01a6c2d1688918675e2dd906cf08019dda2ee326548e0dd6f817e58ff9248ab6274101a49a0604b52e713900dbecf799b011cb2078275b9db1c0a8e15d978d45797394dfc83c7d51ace40b20edc7f7ce43bcead76e849832980e52f70fe0d552e38ffd7ddff004e64be5d88191e33a79c2f8e4f8d7af9a5eed837c202c7c9b8cec10fabea49b5b1c497fba8def15d5041657c61bea859251d53b389fc8c24eb3c70a9c59419eae3c8797f5b0a2deaea1ab5ad5abf5f6912b6a3d357ec3e4a81ee397081fc14c8c28f994e72d3cc288fbed5a9ffcd73aceff53aee559706cb5dda0af9931581d90de9604aef15ed5b04b94ff2a13524de3c70ea94df7b0d8b84903205e91e79850d5ac342ad269ef42c5b9165dac5da232dcb854e5e04490bd90ed5da2e8d993a76ffbad4d4c94a89fdd52b26a441b8d8c1798274fe2772327943e53b4f9ab2fe9dd406782f8676a0865134938c2a864a9349d310d9ef44c166c447fd9642ddf91c5e7c25dfff7201b3ccd589acb81c2d928691deda1d6023c746321c500b4b14b76dc2334ec3395651d2e7eb08d671b0ec32fcb7331e6a4a11328abe358d64a5c092d48dfb6a06c4041a1463059703828e921c1fbbc7ba7763bee54490c6eef63c7ba71662c8d6e3ef006ae9865ff87a14b4e10e7a94332f6f7d34f488f2a21a203c936846790ae4159acba3285c74f76480eac53bdde8e7a87802ac4d47bd5f5c27aca1d366f70035edea11b944279a6ebdd8f07e9f16d3e60970083fde99cee3224dde8b27eb28248b17e6531eb256a80550ddf9a2f45305176d997c92d2e3396474fdb277b7ebcfa38391ae73e7f54f90c18936849a5e4b101ed5a7851aca1c19204a16417f6a1fca67de793a7c20fc692fa7b24249a8f5c8e608784e462b4c5c73c539db775efb36264b1a12e7e37d0beb79ab9bae6b21894b266b929128ae1170d98554f31bc21d442b7d8ff63331404cc6f1ff9d998e5c5510f6711aaaf39b83adbfe7899f6b084d2b20149130fc342ad5505fa3b170e5f2e3d46c48414886a6e968aa19d10f605efd1824dfbb08147bfc74bc3f7f648059fc4f19dea9f5e33744ae8c226c12454ff668a02e1bb782b10f8c4dea5fd365684c41e6da30133d4f4b31f5a2e9d9b2c33641d52c4ba349cf4b82c712561325eee4558d03c7ccb67ae6fe7143ec6ea4f69055cbc16b8c5a3cc1cb23032a9fd67a55c0baea805f17f2b42f8023ce28d3aa845dfea1f189514ae1b7ab59cccd13d0045bd7bffb1c1223de029c9088d196041f82bfb55a9e0e64cbe9bbf50fa4066cef8c7c07d29e94e3c96a66dfdee176af3dea04e9239d094a4e14b8c684f1a3f57e476291c76d70562f5f6171dd8afb90f124de02a17ec1f4e2833728a78c3ffa3a7bf89208f65898b4190c74376bdbb29f83c4b650d186ab600a7718c8dbef98d92ca98866410224facda4f6b9c6debdab37b25b6ff911a931cff4e3ebb8a626ba160e8be63f6cc27bde1e7c03211681967a0c0dd09bf696124036300152fb46f5eb53cb19ffff464c9f920d3cf8d39d0703f0c36d13dcbc8d0e9ca9c9be6727492f10522a29204e0dfbe253a07469a905cf2d5b35b98acd48e1fa72636b80d421a4a0404fd392afb265b25a04e0ba7ab5e258ebafa98852675461ff428209df95cc98d24582bdc5dcc93be84d6caa14fc73088e3b8ef84367c6a683753a669d2e1aeab10fa341f46b4af51d1ec42c171b03cbb9577b0f6643cbb261d6f87028db3d044d98bffae1dae8c423f993a91411a5c944ee00cb3f43bb75691ab147c0895544503324dd538507199738fb7f9ace7ed10962bf669499c7e4471764c4d1ad6cb73281675b6917daa08db0d787003ba06b6fd7c32cdb8573f464e16ca1a12b29505b1596e3b3be2489b0300fcd6f7f6a98aede096b906fdf148917987f1c4a3850873f03e540c4ed0ee4a205d31cf1e63a0ecf96cab425ce50b99078b35f67e3bcedc139b8def4e742cc5c7a62ef18b3c12f69eb8f791c7d1b30a76866397b483213b8226854c10ca191e369b42bfeacf35eb7cca88ce16f2a873283945b09d6cd67b9fac40a49f36b01e849bee4cf244bb4c8380b0c35264ddeb34e0bb2dae688c4358106e36e2ea5b04bb0691689e3b7e85696e2cad6c92ecba830a83641f7c9f971d0e484f43de3f289c5e48114e6436e9699aa5a18784e89bb76e2d84beef883f32ab5914c34874e524bb14eacef3340f0740b78b55f4e0d54cdded61d4d73bc5791dd0e878810ee6b4699bd02df0cc5ef076e0943bca32ee101e7b77c98205b6708c8364c9b18285deb5191b77b86570109ed81ed229e46c71d911aa529c00a8ede205debd830b6c6ac9a27b1a4d385e770a9d7fbe1720e6a1f7dd426158217acc6cb49c58f4396b000f275a7643e1bdda9bd5419b32e5786355726284e4115694d1c60aefc2bd98723396dea9d5851cb46a821940b7b61cda0bda729746e1ad6af8b4f0c09a4baca96fa4bf791a938d092f357021588275967eb0a284a074b08a3a14f0b379ad65a59103119bfee7a31ebbe33450d9d8fa82f277200066ed6d8d6dcddc4e0558168f3c7a3845a6c444341b98bd0ddb117f74a4a8588626f641415afb36358a63f179b506ece0e409e6339c24612230ebdfc3a4651cc9409facda041bcc81f7c37991a640b3af05fa941fb810e1cad67b935da1728580745c2a853a4c6fc2ec406b07ba00ccfe49c5e9c66fb7170373f885a81db52861b90e11906163a6cbc0f6df2ea18174f6d2dbbf522f247ae736963e5e639de5541a482259c221775435a23ca1496aaa08ab0c63e7c15a546c12698d5fba1047b0e5da6fae136899c6529ec3a35e08e7717f42dcef84d2ed77d76aeaacb692bcdabf4802baf305a3a73d4be136a661ef1df0aed7fe14de3213b7efdeb09c66371a00791b8ad1be3047e1628c38f7c7887f9099c8872dc9130b801efe7239ce4e3d50760649e0b257e598a576e6b885e21ff714f35308584251239ae76d746fb938c0b21e3ecf13ff0a6494880b5cc3d5b8b938cec93ba7c21a393a3d0bdbc2253eb43363261f0ef93db2ea1ba01b5786b093a7b149396b971acbc286a3bf89482a1c7167710b44969d33c562a379ac7062558a9e3267f3b1ea7a5daf4e753199f69d8bf2813740ca3f524b0b9c4391ce3f2f25f399a3bd72769802d7aa5cd97b825ef692835e7bf47784f2a898819e05efe32f763f4d22b6da60d12f613302b212ed02d50ba8f0c7d540cd694fe3a5c7e65d20f12183bc9ff18151ee12d7c45b2599b622a5e844569bf63a86c460884cb210426ed018600b4035b8ebdd2044cb6d2a085e68c576d5a4a6e1aa4c5bcfef78ba60ddf46d8f4a1f1d472aae00867be915a26e78282abbf89f1acb3d99b787a2b03b13a36e462a87e0922fefc5392ce70a999078a6e775633f022f0655a5f42e0557d0955b1eb8f52ad9625b7648785077b1d492e513a5242ac8e578c69544885c602837e0774bbeea0cfcfe5c842a9fa819ffb6c35cb072ba28df12e34dacff59b4225da73786bc97a81334c74759d57d6e1ace8fc3a97816dba9e0a661006140e08d126796aa7b48e4884ddb8f9101bd272bc12660230eb771bc2ac54f7b5fe8613b90745eac531a24f2599ea891c77ba2cbe34fcfee90ef3c4195d233a4c6f3676fc39806d614f887a35613fa6571cceb6c2b0f41d298e864f2f1bac40e4cf33c21428c3c3c881d0041035a8ad3cc719a50f9f7b2314d9b7ab6b4b480d5ae5307cca5fac384af28659065363101eb52c697f2cf3e73886e4433d79036be405bc636332d396c317cad9aaf8bd353926b2fde598471c15c22d986985db199629378305514866fa9bebc3f7519bccfa71c1fd36d8d67a0d8f9e810aaaf91fe909cc01e1a36e3632533f9f3c01f56feac2489b65317764de820dcb5fb6d9dba65e24fc16d5317cd42c1f880f46c68e19486a6753ce34239718027107106efce6bfc9c3fe5bb9fb28bf8ae638576cbd709dc4ee39f235ba2af30ecfdecd765d9c3cd96c85ddeb59a8bf2171073597f43ee33fe36121c32c74df8808d7546ba02c8e60cce1486eafcb710cbea340d8758098c53780b42e346c576f55e2acb32250273c247f855e1aee467f7a04649407673410035ca9a838c0373954b3cf4c191222040f8b8c43e1f5ef0675faf4b67d938717616aba34416d7cd9d9ebe8d1e62b45dd80e391be7a94e06e4422093d96f39625cd9615418fb820dd99eb6602a8a635f50d2965767b3a932f33068d917ddc6af3343fed2730d64c878eb8e2a98c67d7f767515db84b3d837b3d1cb846304c8f1313a25ffa2675af8ee1bb5b3b9e70226101354636fe55e231560607a42b8275a061ee94b5ea136bd83e2502a74514160dbe54bc6e847e2fd4f24200151367cb1ba8c5d0b4b3607b4328adf3fd98297b060624ee3e445b9d5db764882d5e8d156951df79d213edb47b309f56a404b0f1a30d0e6b93625f04a6cc28cd11b424851300decab17cff574f0cf5c450ace54f619043bd933a5068ae3273d19f05112288f18d6be393f9e9330c8ad0a902dcd3ed03dc78aa4b75ce009b8368ab620c41a23a2d34da672f28b6133f1dc2e8c7866d441b777e6b1d69cb544c104a2c2f9cce89967a847d9c4282dcb150a8dd4fa68602063105885eb1955384e44870284768794b602bc284f8b3ca995ebb5df86312771d862532091da250b72155e03d599653edfab414f246dc8e36440077e7de64175055c552867e1c8b178457e47b44bbe996b3d1b216f792f9802c61108b63fb5783d8c4d10943130f253f1b591b68eb208ee80e275978bc2c2cebad2b75abd8028c8de038a8e2fd9eddab8d4e862828799b41b2dbee8f031e6540927db2398bf67f1828f155b3d70fedf9c27369b3c4b6a0af2756922893838b428360efbd0ba16f6018c355b4ac67a19f32817559cb7a1c2b8e646516010b72517f6826f58e5eba09d14dbfa10dac39291d77a9caefdf35d0b07f621e868de80eb64092a1f8f5d92e22b6bdac39003519ce7252d9fc2a482d0976de8c72eb16500135a31a1ed4bcce31d51341e42e19176211fa126aca81dc0182ba5092bfbace4406edbce4f8e3e89bd89532559ca7910b3e8253fdffce9ebd891132cb837c9b14eaab221562dbc84df254a8251d093eb1c64646dae1351c885288b99e1cc17dbe13f1b8544d2ab66900d003d28203618a18309bc29e49872f933cae3f3771f4895c8c6eaea324718fcd91d8e787d796e0ededde46e85cc7a3b54935e7b2a8ed42f65aec0534f32b4a969d7097ba9b3e68e5914c5fd5ba51dd1a314bf46fa3e037ed2d9cc246f0d20fd6920a1f69d9ca0cad8f5940e121eebd5ce579b52f42d2d00dbc316a883a587750dff7bc45a3d3a229403f018fbde012bee8129069265f235b839f0b9c8e53f240aa1b13ed347a29d4463b227ae85bc6caf7f129f4ab2f3d24dcc1435107d71c16c6a1fec141e2198974d5aa50721ee21eb62d27616f19a314b3029755b5462884750276b63ddeb568706db963951d185ef2ce9cd62c7b6296200efbf65e26dd5066f153ae1f086ac14451e85f4c59dd2086d3bdec05258a65dd473729832a787f42a4c59c098e66c6d82610ef03656a93d444bb56a8df00df774e6c3857bd6d5ca66b53fed517d7b1cafc10f3aec7039505a488b2d25b76df5614df176dda7ccbadbf9dd130b209c6e8ed54d56f52688b7a5f258776e236733e97d1c9427637346af7aa7693e3740db7f060cbe05f78292ca52706bc84f4b12139f06e4a7374f2c342d43c6f2a16418d6b234639469bea67f217d1595ded9c678406b5169aa3fe8eeb317287ca9bdc54c0d383023e8e0f61b7086b668036ec0ea4b645a962de64481ae58c120cfec185aa028b8fd5bb2839d32d47be373d9495a4adaeae7c2dc97251b23c95d3fe08d6c1b22ff95885b42d0e0ed4ec046085716af28373ec9b74c6257b03743fa1b9eaa0895803ae6959b80398e1115407d105981890cff363442146cdccaa4bcd7a1eb4ccf0ef3923681c22c9e8a55e807502edd3f0c5e601f9a9c5ca50e200a79e7d6aff4211f9bd249cccc803799f4f3dc0179b05515f143dddf7107f0103d0825ae6c46090bad92cbea0a08c2b2167729ebafb73b8ddc41c91f08e19eae0d570f0f52afbf432aee62bd9720c2de81e60831feef7bac451c2fef0c4246f0d45c7d9c0cc82318f4907b8214eec41c4d4a9b207f4180bd564e5319f068409f671b19f119b54037e3ce50e287350b2d4ff7d7fc15572fa39d0b70a3be74d41d5569167c48fdf636192c4c953d4fa77202fdea68df9b109504059e7f2a5fc78b06985d6d0356766f23d68e99309ac5ec5705b6f35a98b08cf0944fd65918546b794f3e667dae184b854187dacab9047e99a9d799ab56e6fa168ef4553abe95e5b9157c7911f807bbff87c06b379699a70b3990d1a64f5f6d15f31dcce0aad91634b2b6c31234748cc12ab1eca0d87873adcaad0432277e5b943541aa651997b060ef11d5af1ba4fcc060987fc1dc1ec11eed492f65795e17d4d0846d9d82b66b2fc4c8bddfb25cee3ab70e611d5c06a05d2bd09e25d4bbba09d4a7107a203aeba930715b085d2beff91d3322c19241991c396499b1a3e68610c701df8cc04a85cf7985952eb2ff5e3360651481dcf4df28a14191fa89de8b14a041d7752f0737f096e4dfcadc7c13879cda3556e4376c78f3b77b21f1b0b4a32e344821106042716fbf5b53cee64bd04bc1c56cb8fe532564ab31b720b434d80389a5734adee26af2bf733af2b3d46b7f1ff170a74e75bc55c67d262d9512a464718dc87e93f000b279b954051a7c438f98547e4dd372ce9f25575738e1b64ac79bac6cba509117a9377da70545d826bb49fd33ae47f8e17abac2f587f8c7b545389716e81b7d2c740f7f15a40f087d7e934d06e0f0a436821f16a1b477ae7056db831575648a3e9d2554ac3c6f7b5654b054d58e4f6b8afa38b0e7504fa02325227fffc0a1d2e5f6a982a1e5447bac2eaa4611aadbaf068d10587e688e3b887b8d1334209a6bbd1cf0075fff79557f91c363164fe4d0998e74224633f5396d29505e673d68d6989828e4d833a0995460d78d55ba68735488c931f59c4cebda9a2975c33c881063d7aefef42c85c96c2c445d56d4e508cf877bb081b4d37a2f3621231c5afdfa4f74e5d84d42822ab335d138c3e52ed46cede8072f2ea182f938eb64c1c92ec27a4d7316c9662e1f59485effd669a7bd412bee2bef5408d5deaebf1469d0feeb3d6ade52b648392fff29e30c58243069fccbaac7a7635614b03a6f3e5fa353c5d575fe6e9ec7a15a8a2b26048257e7c05364e969b9d44affdb4fbe014389a76b2eea009b0e360fea2405e8f340516a9c96978a61a5f9e97746d32310c091e3daf9b59630eb8a09127721d04a59e3e197693bf12c0a6d3f4f8726b697119cfdcff7a57b11c9dee5c9e78b76d0af4c949b0257bae2342d04862d06fc1e667477c6d970a2a775473ca91ef4f0153eaac8ad3ef2769a6ea9ffdcd13d84de0bc0ddd2349d2080c54140d128f1e38338a369372df0e20462ac2f4ebb6b442e301942180bb6c1e1fadaf51c3592670ba2ca43abcf4d568b4c098d18ae43ddd7131dc329a7a90ee85b640181e230454216b26ccb5d2e239c87b67743cc259e1c634b533cac166422d2b126ac6bf0d210f1593cf3bb5de6362354b054bfe810703d9505952282d93b419ff034ace98d38651a86663db739618f6a72323571885a80bbae1bb2aab96d706ce3aeedd454b178836c6c8ce9f49193ec4b9572000be470e5a7533d35f530d3f55339e9418f857e4ab04db84ec5ef0daefd4c9bd88b73677021adcc1e8c7eeac146a00eb515310d3cbf37300427c74f0d3d3e4548ac14489a628b2abd20a1f8a86fb81350c4891aa36a8cfd55821458ee2e5a4018e3bc22a79ee6a25d6543645210aafbf864e80125069086c67bf52e41afe0d37b96a0b2972f1c1dd04d303e0eb2bc89ddb6a0de170c4dcfdc2ce07eb11a2a6b234449d3dae38a1f992c9a4ce287b399bb9ffcb7c73cbb4bd1eaf595eae36fac8e71fc5b9640f565d50d018b6787fd3576b234fe6781a34b85c1cdfdc01a79af78dd267e6be51858801eedb691c058f9c7f75f5c7b40a12ef2bede6e95e6985ef8baa0b33e0c32458136ca372b62868d3985fcbf9056d5fddde806f01480a80dc50a96deadc07dd7d244ba6ff62ea2191b363a113cd1315a85af54a92e7944f653c6ec4599bf6e30917000c52c18c6eb82bcc6c2d007485be81a17bed4ef85f5158e0d876ac2fe57f154ad6f6ff61f9051cca3fbb260ac086f0e381354e1ab5b6e73ef471956606644f1600ca8e3911f15031fccb7bd99b667b28e32193616a0f04a98c22d30eb1e4af0eb4b2b66d9e5dd5a6188d4b3bbc83d017cbbacd23a43a5ffc79cc4621604924deffb3fc7499ba88142899a73c03152ecfc66da5593cf4aa5bc5cde509fefc4cc7f8f62783d5e263055f508f5bb7398dd07c2687a9500081f3d13a96d011753a38ff1c932c4ce378b38fa2770e6a6a35bf0b33bf2fffacdcc7e29e0d57ece8a0a6366c9504ab20326917b0f1ef8e21922dc176feea0b46f1583052a168ff81b16d7119dd5da88bde1f160e6559c47cab3397aecd06c31c98a7c94e04dad7cdcf999d70ded4c5b49b32d7c2df20314f73a9baa2daacc6d3e5ee5de61b6f2ed61f4b32c19cdc97d95945d38d3b3714d2b7fd779f913925de678c03f7657ab2175743c2f5b3f11eedfdfa5d18af8bfde8351198a0b3fbedd55e6301ba659ee54fc372281e9ea90317a3f86df1eb1ecf2dea059b9334df9fd31e87a103852cee95a696e5825f58c7c5c889329f7be2fd5e15600aa4a11ed12842986e8d8b8ea42c3c897a1c240e80a31a7b356454b1b5fae1ee9be55ff738ac1b2d75902acde292026df544818e3c3015ab935872b1b7dd5701cbc124e426c8a6151185b49a7986d88a65b32db9f63a7a7ab25a81918b63db4fee4e830b9098ac0eeaf840e71ddfe681e9b737402e12373238470b64aa5f1eb4a99a175b0d487327281e7dfcee15235334dd57e146d9442443920d48c4a701207488954d7e9126fc11a207d848c55a2976260169d1bc5a06c0c12449510941a8348b71b34d183a139a461564ab37397fa53b2d8f398817de46006158a11ccf2154036f058ebb4ec1e7222b607767da2bf613bec93e78edcd070f0f4e016fd848071044a817392b8219dcff10edc356b87d9bde7d26bd8daa1b04a07b93f0da8d53c0b9da434385ee6a23222315be2a415c165ba1175c24b39dcd0c5e008cfa59ca88102dee434c7331fdf1f6cb883547f8d55d5c667198ca676feab4210c68786de026fb6cc67475b4e70b97a6904110badb4cd449429f09e26a9edb493aee3bd550c0920e3f33489d97189ed7ee3457e18d7f601e0128999a1de0adf6309bc214b6d59260b08795fd58394b8c29b0cb9047f5faf9df7f97
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 830e11507e4e2e4f0977377ed84ad6040033cfda83a77e22a25dcc5a8017ed126d366720455fe502fcb6df26c299259b3d2f836aa666882cc15c17701df3e98a30df369b282304f3c1e82265dca55ce5532ae1e1cd277e10c879df0c1b79794611a88f8ec90916a0bad8856990ddb00c084acca05f926e4b38b49d9da4593251efbaa3789e2096cf4ce7539e707b00d0e81754bb0fb997d04733d996f2d7e9cc9741391bf244f624c6fc0fe1f911e5d8772309f22acabab9f187ccf42a8ffa9e0f8d914ad501e78a3361cb3bd97643a861d19ff74c7acce491755fcf3da02d22b396cc9b8913a166b99d0e6ab3eff093fd0702514d1e468f8eeb77776f6d187f0688d00df9c96987aa271c932f24cb6a6b0f921cf1a3b78802d061b8970fe4992cd652bcc0cb56fbc6d833db64b61d04f5589090ecb235fe499a40039e08dae70bddb124e1a58c833938ee6bb8d5a17066c0b8e13761e7cb32047133dd63e7cad5cbc20ac1f110af3704cb6b64795f3b612189aac31262c15b262bf30227fab66a69e26eb0dc9308a80a67d1510e40db68765aa8199ccb446193676f86867181edd63ce6557f75b56a45f026bef17c3b29cf2252901ca6255962332d3b13a321e04d44582ff5ad79de3d0879cf3cb734e51759ca80194d5174ad6a35f3f82f8864dc6ebfd9f82a9eb737100dc56f244d341483d1b23da5de2052bb09812e33282f07b334322e84351639b8a2fb26ba955bbf344d3f80427a0cb11a757c8262241b01a7556e5e999c641d86b6a146b574b12f602858797d79505c9b79fc6337d9bcb0ab1e9508799c3a54e64a3ce4e4e13ae50058438a18618a5514302fbc51157c9f3bfefaa47dadd629546c77b98732ac97f91c8cd850ad8e2270adbb2a0ad79c1a4f4e5c7c0419957e6983da358be24da630c284e7175d6c57a6f3598e4705c54de7fad875b53686894c26e7762d3ae0775dfed4016d44e620b4f58131be91471a9a686c2c182fcfee6882e02d9f49b21791f02dd8a88a7ea35f68290157a980e55cd641a5d76443351aa31723dd7c46a4cbc77fe017ca91b4bde06be1499709fbcb27b679863cff252ce830e4b3f0d8361992ff087a53453be57553f1930f396c897132a1ed919e48ccf14893b94a567856e986141103f441303e3e32d4560c3a5430b663dfc627a71e9b3edab7ce2ccbc2ecc645f0e8198737090140ba5ba063179a94bc0c996457f25648a41845db34e6f372ab017418161d0e1142aec314cf01bf6323fed8d9bbeec7a95948d936db817e919e6076e1d796838135bd3a95c890663143629736b37ce1880e46e5004cf9c8f0e8905c43043783874999561294e988742b252aa538bac3c5c162e390222843ad20d6a8d23f934318e60d4e5088740d075d2f46b3ca1df97fd9303630750308ffd04fec2a665524ddee577512532245183c0eb2c242db1541e6a97919c7aab51e8819620fc9dbb902bdab518360c71b6ca0eeb03f4cd4994e7ba4e762f7085663a34ad19774232f79a7da3c3516cf2f795e0f8695597a91ba6293ee44045c45e791d1c73e59b7c787d74ff416ca6a5d0bd806d560400784eb6544912c5e338fb08be746bfbcfb42494af051732b1c209d5b2466d09bc89809557bcfa0501bd62105590c340b2b31090ced14516924570acc55c97bfdd2f572399f88baafbbd62c4abc8ed9d2bc92ae1ed66eefbf69876d105fd740bc3a50232c064ea79cf0f6b90de2471da9eb9a610d2c07880fbbc1c3c34f2cb81761d99bc8118e96cde58ade6285505fbbc00e6dcc83aaad99e469c90d8201be39b6a9e2d66f081dc48e243ef9d2595c9f6573a38f639c7b61a6f929edab21b4f1b26abde130926bcd3b76c80ae0c3100973ab3953ef8fe42267d543eb7aba6c37057c6a6be54b1074fba9873b8b84da056a0bc1a077e153b344e1fcb3c72c2860df14a1c2d7a85248a02ef94133f938fcf2d78e4debd15d9310c2a2c80f5d71d0e1083ebff9e2211fe6fc9ce802ff8326295207619b4bb304c8a7b5f28afb0cbdf579f6f78cad1e235a5bc74559ff103c3ded0c8f28facaff74abf5532b687c193747ad361dc87aaffeb7fb6ba6881cdb101ffc378f3a212c726606ccf7ea63760a5a0fa3f8d7af67f183f32b0b32fb942af9cb8ca37f27d1955a258b41723854115f56008d9f8e0a652e394e903317bcaf73f0a20c3cc5e317a54f80f4a4597530faefdcbc989067af698563c47f5fae0cfcb938b0506c399fd0e7983c4f4f61b87749b3d1ecfa80ff1f7df2d4a9961290c50874a92b53d5fdf626a1649b618e14a03b72def5ee06f208106439b83a6261cb15237fdcc0d7b051103bd8ceb5e2e9a16dbf8e1a5237458a76871a3b4577ae24880ecd8030e2a833d1c61f48886edc4480ffbc95ff219e26e629ebcbd7d254584f134e42cb2a1dff4fb0e4df438dcc2be619ac378f3881bd54896b6b411266735771ab04e5fcb4f0e7b46080a84f7720f91f512c
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.
