Tabs

Definition: Tabs are a set of related content

Design


                                                        
                                                        
                                                            <div class="nav nav-tabs" role="tablist" aria-label="Sample Tabs">
                                                            <div class="nav-item">
                                                                <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">
                                                                   <span class="vismaicon vismaicon-dynamic vismaicon-sm vismaicon-filled vismaicon-warning"></span>
                                                                   Warning
                                                                </a>
                                                            </div>
                                                            <div class="nav-item disabled">
                                                                <a id="disabled-tab" tabindex="-1" role="tab" data-toggle="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
                                                            </div>
                                                            <div class="nav-item active">
                                                                <a> id="selected-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="myTabContent" aria-selected="true">Selected</a>
                                                            </div>
                                                        
                                                            ...
                                                        
                                                            // Overflow tabs dropdown (three dots)
                                                            <div class="dropdown tabdrop">
                                                                <a class="dropdown-toggle" tabindex="0" data-toggle="dropdown">
                                                                    <span class="sr-only">Toggle dropdown</span>
                                                                </a>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li>
                                                                        <a id="normal-tab2" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal2" aria-selected="false">Normal</a>
                                                                    </li>
                                                                    ...
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        
                                                        // Tab content
                                                        <div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
                                                            ...
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Primary variant

Add to your tabs main container .nav-tabs the .nav-tabs-primary class.


                                                        
                                                        
                                                            <ul class="nav nav-tabs nav-tabs-primary" role="tablist" aria-label="Sample Tabs">
                                                            <li class="nav-item" >
                                                                <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
                                                            </li>
                                                            ...
                                                        </ul>
                                                        <div id="myTabContent" class="tab-content p-32" role="tabpanel" aria-labelledby="selected-tab" aria-hidden="false">
                                                            ...
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Justified tabs

Easily add to your tabs main container .nav-tabs the .nav-justified class.


                                                        
                                                        
                                                            <ul class="nav nav-tabs nav-justified" role="tablist" aria-label="Sample Justified Tabs">
                                                            <li class="nav-item">
                                                                <a id="normal-tab" tabindex="0" role="tab" data-toggle="tab" aria-controls="normal" aria-selected="false">Normal</a>
                                                            </li>
                                                            ...
                                                        </ul>