Scroll to Top

Tabs

Create Tabs when you want in-page menu and categories are similar and you want to include sub categories to your category. There are two types of tags available in Material Grammi for multi purpose scale-ability, use them where you wish to and how you like to. initially activate the Horizontal tab by adding tab-active class and vtab-active class in vertical tab links.

SITEMAP Documentation / Components / Tabs

Links are shown in horizontal axis.

Demo

Tab Content for First Link

Tab Content for Second Link

Tab Content for Third Link

Code copy

<div class="tab">
    <div class="tablinks">
        <a data-target="#mytab1" class="tab-active">Tab 1</a>
        <a data-target="#mytab2">Tab 2</a>
        <a data-target="#mytab3">Tab 3</a>
    </div>
    <div class="tabcontents">
        <div id="mytab1" class="bluegrey6 text-grey1">Tab Content for First Link</div>
        <div id="mytab2" class="blue6 text-grey1">
            <p>Tab Content for Second Link</p>
        </div>
        <div id="mytab3" class="green6 text-grey1">
            Tab Content for Third Link
        </div>
    </div>
</div>

Links are shown in vertical axis.

Demo

Demo will be available soon.

Code copy

<div class="vtab">
    <div class="vtablinks">
        <a data-target="#mytab1" class="vtab-active">Tab 1</a>
        <a data-target="#mytab2">Tab 2</a>
        <a data-target="#mytab3">Tab 3</a>
    </div>
    <div class="vtabcontents">
        <div id="mytab1" class="bluegrey6 text-white">
            Content of First Tab Link
        </div>
        <div id="mytab2" class="blue6 text-white">
            <p>Content of Second Tab Link</p>
        </div>
        <div id="mytab3" class="green6 text-white">Content of Third Tab Link</div>
    </div>
</div>

Feedback