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