Back to the
Component Shop
Read this first! Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Drop-down Easy Mega Menu Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table

Tab Navigation

Tab Navigation

This component can be used as navigation, or it may be used for collections of some kind. If the component were not limited in width on this page, it would have spread out covering 'wall-to-wall'. That can of course be done, and the height may be set to100%, so you can use it for whole pages.

You may prefer changing the colours, and that involves both the ID on each .tabsconent class in the style sheet and the attributes on each button at the top of the html code.

The buttons have been given a width of 20%. If you change the number of buttons, you also need to change the width, or you can leave the width to be determined just by the length of the text plus padding. It will then look like the buttons on the index page of this 'component shop'.

The contents of the panels can be anything you need to put in there.

At the bottom of the component there is a HTML element with some java script that makes the whole thing work. The ID and class names used in the component are also being utilized by that java script and should therefore not be changed.

If you want to add contents below this component, it is best to insert a new container section below and outside the container .tabs-wrap.

Download the component:  


Who we are and what we do.


Some news this fine day!


What can we do for you?


Get in touch, or swing by for a cup of coffee.