UI Patterns → Tabs

Tab Interface

Christopher Columbus

Christopher Columbus

Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.

Isaac Newton

Isaac Newton

English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.

Johannes Gutenberg

Johannes Gutenberg

German printer who invented the mechanical printing press.

Pattern and Usage

The tabbed functionality seen above is a key mechanism for organizing content. This approach is seen throughout the DotNetNuke administrative interface, and is intended to be used similarly in custom module development. However, this pattern can also be used just as easily outside of an administrative experience.

The tabs are implemented using JavaScript, more specifically a jQuery plugin. First you will organize your content into logical regions, and then it can be turned into tabs. View the markup, css, and jQuery above to see how it is done.

For more technical information, please visit the dnnTabs Wiki entry for this plugin.