Foundation CSS Tabs
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Tabs are components that help us navigate multiple documents in a single container without leaving the page. They act as a link that changes the content inside the container based on which tab is active.
Foundation CSS Tabs Classes:
- tabs: This class creates a basic container for tabs inside which all the tabs are created. This is used on <ul> element.
- tabs-title: This class creates the tabs inside the container and values inside this class div are used as titles for the tabs. This is used on <li> elements.
- is-active: This class lets us know which class and pane are active by default on reload.
- tabs-panel: This class contains all the panel data associated with each tab.
- tabs-content: This class contains the data that is to be displayed by tabs. This class is nested inside a parent div with a class tabs-panel.
<ul class = "tabs" data-tabs id = "tabs_example"> <li class = "tabs-title is-active">...</li> ... </ul> <div class = "tabs-content"> <div class = "tabs-panel is-active"> ... </div> </div>
Example 1: This is a basic example illustrating horizontal tabs made using Foundation CSS.
Example 2: This is a basic example illustrating vertical tabs made using Foundation CSS.