Nav Tabs

Documentation and examples for Chubby's nav tabs with card integration and scroll arrows.

Basic Tabs

Takes the basic nav and adds the .nav-tabs class to generate a tabbed interface.

Nav Tabs Card

Use .nav-tabs-card to integrate tabs with a card below. The card uses .has-tabs to remove the top border radius.

This is some text within a card body, below the nav tabs.

Tabs with Content Panels

Dynamic tabbed interfaces using data-toggle="tab".

Home tab content. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Profile tab content. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Contact tab content. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack.

Tabs with Dropdowns

Scroll Arrows

For tabs that overflow their container, use .nav-scroll and initialize with $('.nav-tabs-scroll').addScrollArrows().

Content below scrollable tabs.

Pills

Use .nav-pills instead of .nav-tabs for pill-style navigation.