Display content efficiently and choose from different tab styles & classes with our easy to use tab component.
Usage
Tabs organise content across different screens, data sets and other containers. With mesh we provide a pure css approach to implementing tabs by using the radio button method. Choose from different alignments such as bottom or vertical left & right.
mesh tabs automatically stack when the viewport is smaller than the tab container.
Checkout the example below.
Notation:
Please ensure you read these guidelines for tabs carefully before implmenting them in your page.
Everything within the tab component should be wrapped in the tabs class.
The tabs-panel element is where your content lives and the tabs-label is the header for that panel.
With the markup outlined below, it is important that the structure is preserved, meaning the radio input should appear first, followed by the label and finally the tabs-panel element.
Name: The name attribute for the radio button should be the same in each tabs component. You may run into some odd behaviour if it is not changed per component if more than one resides on a page.
ID: The id attribute for the radio button should match the for attribute of the label.
Plain
To implmement tabs without any animation please checkout the markup below.
First Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant tumblr fanny pack. Aesthetic chartreuse chambray, locavore tattooed food truck banh mi gastropub air plant organic bitters keffiyeh lo-fi jean shorts glossier. Leggings scenester PBR&B, bitters ramps sustainable lo-fi tofu. Truffaut flannel cray tacos, occupy organic sustainable bicycle rights flexitarian squid woke scenester.
Second Tab Content
Glossier brooklyn church-key, fingerstache sartorial pickled pork belly keffiyeh before they sold out. Butcher beard hashtag bespoke affogato viral. Wayfarers distillery pok pok chillwave kogi pabst. Tote bag chicharrones stumptown disrupt, truffaut shaman thundercats pok pok PBR&B pitchfork tbh vexillologist man braid. Tbh four dollar toast yr glossier leggings, subway tile kickstarter. Crucifix scenester green juice, normcore distillery locavore tattooed semiotics hashtag tousled venmo. Meditation bespoke sriracha selfies.
Third Tab Content
Vexillologist messenger bag master cleanse lumbersexual williamsburg. Before they sold out direct trade readymade ugh paleo irony street art. Slow-carb lomo kale chips venmo lumbersexual jean shorts. Vexillologist marfa pour-over normcore, kitsch wayfarers squid put a bird on it man bun quinoa pitchfork chartreuse occupy kale chips. Pour-over man braid microdosing ugh kale chips.
To add the border animation to tab labels, simply add tabs-animate to the tabs class.
First Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant tumblr fanny pack. Aesthetic chartreuse chambray, locavore tattooed food truck banh mi gastropub air plant organic bitters keffiyeh lo-fi jean shorts glossier. Leggings scenester PBR&B, bitters ramps sustainable lo-fi tofu. Truffaut flannel cray tacos, occupy organic sustainable bicycle rights flexitarian squid woke scenester.
Second Tab Content
Glossier brooklyn church-key, fingerstache sartorial pickled pork belly keffiyeh before they sold out. Butcher beard hashtag bespoke affogato viral. Wayfarers distillery pok pok chillwave kogi pabst. Tote bag chicharrones stumptown disrupt, truffaut shaman thundercats pok pok PBR&B pitchfork tbh vexillologist man braid. Tbh four dollar toast yr glossier leggings, subway tile kickstarter. Crucifix scenester green juice, normcore distillery locavore tattooed semiotics hashtag tousled venmo. Meditation bespoke sriracha selfies.
Third Tab Content
Vexillologist messenger bag master cleanse lumbersexual williamsburg. Before they sold out direct trade readymade ugh paleo irony street art. Slow-carb lomo kale chips venmo lumbersexual jean shorts. Vexillologist marfa pour-over normcore, kitsch wayfarers squid put a bird on it man bun quinoa pitchfork chartreuse occupy kale chips. Pour-over man braid microdosing ugh kale chips.
To make the tab labels align to the bottom, simply add tabs-bottom to the tabs class.
First Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant tumblr fanny pack. Aesthetic chartreuse chambray, locavore tattooed food truck banh mi gastropub air plant organic bitters keffiyeh lo-fi jean shorts glossier. Leggings scenester PBR&B, bitters ramps sustainable lo-fi tofu. Truffaut flannel cray tacos, occupy organic sustainable bicycle rights flexitarian squid woke scenester.
Second Tab Content
Glossier brooklyn church-key, fingerstache sartorial pickled pork belly keffiyeh before they sold out. Butcher beard hashtag bespoke affogato viral. Wayfarers distillery pok pok chillwave kogi pabst. Tote bag chicharrones stumptown disrupt, truffaut shaman thundercats pok pok PBR&B pitchfork tbh vexillologist man braid. Tbh four dollar toast yr glossier leggings, subway tile kickstarter. Crucifix scenester green juice, normcore distillery locavore tattooed semiotics hashtag tousled venmo. Meditation bespoke sriracha selfies.
Third Tab Content
Vexillologist messenger bag master cleanse lumbersexual williamsburg. Before they sold out direct trade readymade ugh paleo irony street art. Slow-carb lomo kale chips venmo lumbersexual jean shorts. Vexillologist marfa pour-over normcore, kitsch wayfarers squid put a bird on it man bun quinoa pitchfork chartreuse occupy kale chips. Pour-over man braid microdosing ugh kale chips.
To vertically aligb the tab labels align to the left, just add tabs-left to the tabs class.
Note: The tab labels will fall into a row at small viewports.
First Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
Second Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
Third Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
To vertically aligb the tab labels align to the left, just add tabs-left to the tabs class.
Note: The tab labels will fall into a row at small viewports.
First Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
Second Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
Third Tab Content
+1 gluten-free fingerstache banh mi normcore beard marfa coloring book four dollar toast chartreuse. Tbh la croix lo-fi squid poke before they sold out air plant.
