Elements:Tabbable Navs

This page shows how to extend the default tabs and pills style navigation into Javascript based tabbable content.

You can make tabs and pills use Javascript to create tabbable panes of local content by doing the following:

  1. Below the tabs add a wrapper element with the class .tab-content which contains the "tabbable panes" each of which require the class .tab-pane and an ID ie. id="tab-1" .
  2. Add a data-bs-toggle="tab" (for .nav-tabs ) or data-bs-toggle="pill" (for .nav-pills ) attribute to each .nav-link and also add a href or data-bs-target which points to the tab it should open when clicked ie. href="#tab-1" .
  3. Add a .active class to one of the .nav-link items and it@Elements: nd .tab-pane to set which tab is "active" on page load.

Basic Tabbable Tabs

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Basic Tabbable Pills

Pill 1 Content

Pill 2 Content

Pill 3 Content

Pill 4 Content

Boxed / In cards

Tabs

Tab 1

With supporting text below as a natural lead-in to additional content.

Go somewhere

Tab 2

With supporting text below as a natural lead-in to additional content.

Go somewhere

Pills

Pill Tab 1

With supporting text below as a natural lead-in to additional content.

Go somewhere

Pill Tab 2

With supporting text below as a natural lead-in to additional content.

Go somewhere

Vertical Tabs

Default

Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.

Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.

Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!

Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.

Align Right

Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.

Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.

Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!

Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.

Custom active states

Add data-bs-active-class="CLASSES" to a data-bs-toggle="tab" element override the tab active classes. ie. data-bs-active-class="bg-primary bg-op-6 v"

Fade effect

To make tabs fade in, add .fade to each .tab-pane . The first tab pane must also have .show to make the initial content visible.

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
Get AppStrap
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.
Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page