Usage
Use tabs to organise content and allow users to move between related content sections or views at the same level of hierarchy. They allow users to focus on specific content whilst remaining clear on the overall context of the screen.
Do:
- ensure each tab contains content that is distinct from the others
- use short (preferably single word), easily scannable, unique titles
- order the tabs by importance/relevance to the user, from left to right
Don't:
- use tabs within tabs
- display disabled tabs.
When to avoid
Do not:
- use where important information can be hidden and missed
- use with very short content, consider using lists or paragraphs
- use for very long content where the physical tabs become lost, consider breaking content into separate pages
- use for content where users are likely to want to compare information across multiple tabs
Standard Tabs
This is a heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tortor eget ipsum feugiat iaculis. Vivamus pellentesque risus velit, vitae suscipit ligula varius ac. Nunc sodales consequat sapien sed facilisis. Morbi efficitur elit eget interdum posuere. Maecenas lobortis justo id libero rutrum, ac euismod lectus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id lorem eu odio facilisis elementum. Pellentesque in pulvinar est, et luctus justo. Donec tincidunt volutpat enim, vitae vulputate justo hendrerit vel. Integer mattis nunc quis bibendum facilisis. Sed cursus, arcu dignissim imperdiet consectetur, ante nisl semper nibh, at ornare mi erat id risus. Phasellus sapien arcu, cursus nec dictum sed, gravida sit amet turpis. In nec justo in mi auctor lobortis.
Nullam nec aliquet nibh. Vivamus in ex elementum, sollicitudin nibh nec, fermentum odio. Nulla facilisi. Donec at suscipit velit, a semper mauris. Phasellus elementum auctor justo, pretium euismod orci. Proin dictum dolor at purus molestie auctor non vel justo. Vestibulum non sodales dui, vel pharetra lorem. Integer a turpis justo. Phasellus nec semper justo. Mauris sit amet eleifend turpis, eget euismod urna. Nunc consectetur lectus et sodales molestie. Quisque maximus augue tortor, sed dapibus neque facilisis nec. Praesent efficitur tempus molestie. Duis vel cursus felis.
Phasellus nunc arcu, volutpat in aliquet sed, malesuada a nulla. Sed vitae sollicitudin ligula, quis viverra elit. Maecenas posuere dapibus massa, nec ultrices elit ullamcorper eu. Curabitur eu metus finibus, tempor massa quis, tristique odio. Proin at lectus ultricies, tincidunt ligula quis, malesuada nisi. Integer vel fermentum elit. Vivamus porta leo non est dictum, cursus commodo diam dictum. Phasellus condimentum bibendum arcu, luctus tempus ligula pulvinar ac. Curabitur varius ipsum ac semper cursus. Suspendisse congue odio vel gravida fermentum. Sed tristique ligula est, nec tincidunt felis egestas quis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mollis nulla vitae auctor mollis. Integer accumsan eu erat a euismod. Cras ornare porta suscipit. Vivamus nec nisi nulla. Proin augue lacus, efficitur vitae scelerisque non, lacinia at tortor. Nullam laoreet tempor convallis. Donec erat diam, ullamcorper eu metus id, sagittis tincidunt mauris. Phasellus semper neque ac velit scelerisque, aliquet ornare arcu bibendum. Phasellus quis leo a libero sodales euismod. Quisque congue malesuada est in gravida. Suspendisse potenti. Proin rhoncus laoreet lectus consectetur suscipit. In hac habitasse platea dictumst.
Image tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tortor eget ipsum feugiat iaculis. Vivamus pellentesque risus velit, vitae suscipit ligula varius ac. Nunc sodales consequat sapien sed facilisis. Morbi efficitur elit eget interdum posuere. Maecenas lobortis justo id libero rutrum, ac euismod lectus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id lorem eu odio facilisis elementum. Pellentesque in pulvinar est, et luctus justo. Donec tincidunt volutpat enim, vitae vulputate justo hendrerit vel. Integer mattis nunc quis bibendum facilisis. Sed cursus, arcu dignissim imperdiet consectetur, ante nisl semper nibh, at ornare mi erat id risus. Phasellus sapien arcu, cursus nec dictum sed, gravida sit amet turpis. In nec justo in mi auctor lobortis.
Nullam nec aliquet nibh. Vivamus in ex elementum, sollicitudin nibh nec, fermentum odio. Nulla facilisi. Donec at suscipit velit, a semper mauris. Phasellus elementum auctor justo, pretium euismod orci. Proin dictum dolor at purus molestie auctor non vel justo. Vestibulum non sodales dui, vel pharetra lorem. Integer a turpis justo. Phasellus nec semper justo. Mauris sit amet eleifend turpis, eget euismod urna. Nunc consectetur lectus et sodales molestie. Quisque maximus augue tortor, sed dapibus neque facilisis nec. Praesent efficitur tempus molestie. Duis vel cursus felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tortor eget ipsum feugiat iaculis. Vivamus pellentesque risus velit, vitae suscipit ligula varius ac. Nunc sodales consequat sapien sed facilisis. Morbi efficitur elit eget interdum posuere. Maecenas lobortis justo id libero rutrum, ac euismod lectus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id lorem eu odio facilisis elementum. Pellentesque in pulvinar est, et luctus justo. Donec tincidunt volutpat enim, vitae vulputate justo hendrerit vel. Integer mattis nunc quis bibendum facilisis. Sed cursus, arcu dignissim imperdiet consectetur, ante nisl semper nibh, at ornare mi erat id risus. Phasellus sapien arcu, cursus nec dictum sed, gravida sit amet turpis. In nec justo in mi auctor lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tortor eget ipsum feugiat iaculis. Vivamus pellentesque risus velit, vitae suscipit ligula varius ac. Nunc sodales consequat sapien sed facilisis. Morbi efficitur elit eget interdum posuere. Maecenas lobortis justo id libero rutrum, ac euismod lectus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id lorem eu odio facilisis elementum. Pellentesque in pulvinar est, et luctus justo. Donec tincidunt volutpat enim, vitae vulputate justo hendrerit vel. Integer mattis nunc quis bibendum facilisis. Sed cursus, arcu dignissim imperdiet consectetur, ante nisl semper nibh, at ornare mi erat id risus. Phasellus sapien arcu, cursus nec dictum sed, gravida sit amet turpis. In nec justo in mi auctor lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tortor eget ipsum feugiat iaculis. Vivamus pellentesque risus velit, vitae suscipit ligula varius ac. Nunc sodales consequat sapien sed facilisis. Morbi efficitur elit eget interdum posuere. Maecenas lobortis justo id libero rutrum, ac euismod lectus commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum id lorem eu odio facilisis elementum. Pellentesque in pulvinar est, et luctus justo. Donec tincidunt volutpat enim, vitae vulputate justo hendrerit vel. Integer mattis nunc quis bibendum facilisis. Sed cursus, arcu dignissim imperdiet consectetur, ante nisl semper nibh, at ornare mi erat id risus. Phasellus sapien arcu, cursus nec dictum sed, gravida sit amet turpis. In nec justo in mi auctor lobortis.
Nullam nec aliquet nibh. Vivamus in ex elementum, sollicitudin nibh nec, fermentum odio. Nulla facilisi. Donec at suscipit velit, a semper mauris. Phasellus elementum auctor justo, pretium euismod orci. Proin dictum dolor at purus molestie auctor non vel justo. Vestibulum non sodales dui, vel pharetra lorem. Integer a turpis justo. Phasellus nec semper justo. Mauris sit amet eleifend turpis, eget euismod urna. Nunc consectetur lectus et sodales molestie. Quisque maximus augue tortor, sed dapibus neque facilisis nec. Praesent efficitur tempus molestie. Duis vel cursus felis.