AUI tabs

Horizontal Tabs

Demonstrates AUI Horizontal Tabs

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Wrapping Tabs

Tabs should wrap over multiple lines. Changing the active tab item should not cause a page reflow; the dimensions of a tab item should remain the same regardless of its current state.

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Responsive Tabs

Tabs should be hidden in a dropdown with a "..." tab as the trigger.

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Responsive Tabs - container smaller than parent window

Tabs should be hidden in a dropdown with a "..." tab as the trigger and should never overflow the tab container.

This is Tab 1

First

This is Tab 2

Second

This is Tab 3

Third

This is Tab 4

Fourth

A single Horizontal Tab

This shows a single Horizontal Tab

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Vertical Tabs

Demonstrates AUI Vertical Tabs

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Vertical Tabs - title testing

Vertical Tabs - title testing. All tabs should have titles (hover to view); second tab should NOT be overriding the preset title from the markup. That is the tab text should not be the same as the hover.

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 2

The title should be: "This title should not be overridden with the visible text"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 4

This tab's trigger should not have a title attribute.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Disabled/Page Tabs

In some cases (eg. in JIRA) the tab design is used but each tab actually loads on a separate page. The user interaction is the same, it just happens after a page load rather than inline. While this is not the primary use for tabs, it is a supported use case. In this test, tabs should not load when clicked; and the links should behave as normal (default not prevented). Only the active tab should show; even though it is pointless loading further tabs when using disabled tabs this test ensures they would be hidden.

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Reloadable Active Tab

In rare cases, the active tab can reload its own contents on click. Although not recommended, in those cases the cursor affordance is changed to give the user an indication the tab can be clicked (cursor goes to the default "hand" cursor).

This is Tab 1

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris.

This is Tab 2

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris.

This is Tab 3

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris.

Nested Tabs (horizontal outer)

Although not recommeneded, it is possible to nest tabs.

Nested Vertical

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Nested Horizontal

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Nested Tabs (vertical outer)

Although not recommeneded, it is possible to nest tabs.

Nested Vertical

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Nested Horizontal

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

This is Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

This is Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor volutpat posuere. Nunc non lacinia ligula. In convallis iaculis interdum. Sed quis risus gravida enim adipiscing semper. In magna tortor, scelerisque vel lobortis sed, tincidunt quis mauris. Sed libero neque, hendrerit ac sagittis eget, rhoncus vel augue. Proin eget blandit ligula. Praesent placerat, nisl a laoreet ultrices, mi sem suscipit nisl, non ornare neque massa nec augue. Integer consectetur elementum posuere. Integer feugiat aliquam rutrum. Praesent sapien lectus, pharetra quis pharetra vel, mattis ut orci. In vehicula nibh et enim lacinia interdum. Sed aliquam vehicula risus, vitae commodo sapien vulputate eu. Phasellus vulputate tempor aliquet.

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

This is Tab 4

Quisque commodo, lectus at venenatis volutpat, urna lacus egestas nisl, interdum fermentum risus nibh molestie mauris. Etiam a tellus ac elit accumsan scelerisque. Vivamus pellentesque, ligula eget dictum sagittis, arcu lacus scelerisque augue, in dictum eros eros rhoncus enim. Aliquam nunc metus, vestibulum eget fermentum et, gravida ut turpis. Sed bibendum bibendum sem, ac ultricies risus mollis sit amet. Duis dapibus erat placerat nunc laoreet vel mollis justo consequat. Nam tristique eleifend magna, a ultricies leo ultricies in. Etiam ac purus a ante rhoncus sollicitudin. Aenean vel quam id dui mattis mattis in molestie quam. Nulla sed ante arcu, eu lacinia enim. Ut tincidunt mi sapien, vitae vehicula magna. Aliquam condimentum orci sed dui faucibus eu laoreet massa euismod. Suspendisse potenti.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida interdum feugiat. Aenean consequat fermentum augue sodales pulvinar. Nunc ut diam non odio sodales convallis. Suspendisse potenti. Nulla elit velit, gravida ullamcorper viverra faucibus, faucibus non odio. Duis et orci a massa laoreet viverra. Etiam porttitor vehicula lacus, id tincidunt purus commodo et. Maecenas euismod, nunc et scelerisque varius, eros magna tristique magna, ac feugiat velit lectus eu libero. Vivamus ipsum est, aliquet non scelerisque vitae, tristique a magna. Praesent in neque ac eros volutpat ultricies. Suspendisse dapibus justo et ipsum egestas lobortis. Donec sagittis luctus ipsum, non convallis magna mollis quis. Proin condimentum metus a nulla fermentum volutpat. Nullam vel erat non dolor venenatis egestas. Nam ornare, massa vitae pellentesque ornare, ipsum nisi hendrerit erat, egestas lacinia augue enim in magna. In ut sem quam, imperdiet elementum neque. Vestibulum iaculis nisl sit amet dolor iaculis gravida. Etiam a lorem sit amet lacus malesuada vehicula.

Programmable tab triggering

Checks if it's possible to trigger tab switch from JS and if it's XSS protected.

This is Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is Tab 2

Suspendisse porttitor volutpat posuere.

This is Tab 3

Sed quis risus gravida enim adipiscing semper.

This is Tab 4

Dolor sit amet.