Horizontal Tab
The tab component is used to hide content behind selectable tabs. These tabs are typically arranged horizontally at the top.
content
Demo
A basic horizontal tab
<div id="horizontal-tab" class="row w-100 no-gutters" data-tracking-id="component-horizontal-tab-basic">
<div class="row-inner mw-1200 col-12 no-gutters">
<div class="module adv-jumbotron-carousel">
<div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
<div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
<h3 aria-label="Tab Header 01">Tab 01</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 01">Tab 02</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 03">Tab 03</h3>
</div>
</div>
</div>
<div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tabs with horizontal underline Effect
<div id="horizontal-nav" class="row w-100 no-gutters" data-tracking-id="component-horizontal-tab-underline-effect">
<div class="row-inner mw-1200 col-12 no-gutters">
<div class="module adv-jumbotron-carousel">
<div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
<div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
<h3 aria-label="Tab Header 01">Tab 01</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 01">Tab 02</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 03">Tab 03</h3>
</div>
</div>
</div>
<div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Horizontal double tab
The Horizontal Double Tab component is a two-level tab navigation interface designed to organize and present categorized content in a structured and user-friendly way.
ThePrimary Tab (e.g., "Tab 01", "Tab 02", "Tab 03") defines the main content categories.
The Secondary Tab (e.g., "Inner Tab 1-1", "Inner Tab 1-2", etc.) allows users to drill down into subcategories within each main tab.
Content displayed below the tabs changes dynamically based on the combination of selected primary and secondary tabs.
This layout is particularly useful when there is a need to display multiple layers of content without overwhelming the user or requiring long scrolling.
Inner Tab 1-1
Inner Tab 1-2
Inner Tab 1-3
Inner Tab 1-4
Inner Tab 2-1
Inner Tab 2-2
Inner Tab 2-3
Inner Tab 2-4
Inner Tab 3-1
Inner Tab 3-2
Inner Tab 3-3
Inner Tab 3-4
<div id="horizontal-double-tab" class="row w-100 no-gutters double-tab" data-tracking-id="component-horizontal-double-tab">
<div class="row-inner mw-1200 col-12 no-gutters">
<div class="module adv-jumbotron-carousel">
<div id="tab-Navs3" class="row no-gutters adv-jumbotron-carousel-navs">
<div class="col-4 adv-jumbotron-carousel-nav col-md-4 active" data-tab="tab1">
<h3>Tab 01</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4" data-tab="tab2">
<h3>Tab 02</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4" data-tab="tab3">
<h3>Tab 03</h3>
</div>
</div>
</div>
<!-- 外層內容區 -->
<div id="tab-carousel3"
class="adv-jumbotron-carousel-container owl-carousel">
<!-- 外層 tab1 對應內容 -->
<div class="tab-content" data-tab="tab1">
<div class="inner-tabs-wrapper">
<div class="pre-btn show"> <i class="fas fa-angle-left"></i> </div>
<div class="inner-tabs">
<div class="inner-tab active" data-inner="inner1-1">
<h4>Inner Tab 1-1</h4>
</div>
<div class="inner-tab" data-inner="inner1-2">
<h4>Inner Tab 1-2</h4>
</div>
<div class="inner-tab" data-inner="inner1-3">
<h4>Inner Tab 1-3</h4>
</div>
<div class="inner-tab" data-inner="inner1-4">
<h4>Inner Tab 1-4</h4>
</div>
</div>
<div class="next-btn show"> <i class="fas fa-angle-right"></i> </div>
</div>
<div class="inner-content active" data-inner="inner1-1">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name" data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 1-1</h4>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner1-2">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 1-2</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner1-3">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 1-3</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner1-4">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 1-4</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
</div>
<!-- 外層 tab2 對應內容 -->
<div class="tab-content" data-tab="tab2">
<div class="inner-tabs-wrapper">
<div class="pre-btn show"> <i class="fas fa-angle-left"></i> </div>
<div class="inner-tabs">
<div class="inner-tab active" data-inner="inner2-1">
<h4>Inner Tab 2-1</h4>
</div>
<div class="inner-tab" data-inner="inner2-2">
<h4>Inner Tab 2-2</h4>
</div>
<div class="inner-tab" data-inner="inner2-3">
<h4>Inner Tab 2-3</h4>
</div>
<div class="inner-tab" data-inner="inner2-4">
<h4>Inner Tab 2-4</h4>
</div>
</div>
<div class="next-btn show"> <i class="fas fa-angle-right"></i> </div>
</div>
<div class="inner-content active" data-inner="inner2-1">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 2-1</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner2-2">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 2-2</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner2-3">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 2-3</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner2-4">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 2-4</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
</div>
<!-- 外層 tab3 對應內容 -->
<div class="tab-content" data-tab="tab3">
<div class="inner-tabs-wrapper">
<div class="pre-btn show"> <i class="fas fa-angle-left"></i> </div>
<div class="inner-tabs">
<div class="inner-tab active" data-inner="inner3-1">
<h4>Inner Tab 3-1</h4>
</div>
<div class="inner-tab" data-inner="inner3-2">
<h4>Inner Tab 3-2</h4>
</div>
<div class="inner-tab" data-inner="inner3-3">
<h4>Inner Tab 3-3</h4>
</div>
<div class="inner-tab" data-inner="inner3-4">
<h4>Inner Tab 3-4</h4>
</div>
</div>
<div class="next-btn show"> <i class="fas fa-angle-right"></i> </div>
</div>
<div class="inner-content active" data-inner="inner3-1">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 3-1</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner3-2">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 3-2</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner3-3">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 3-3</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
<div class="inner-content" data-inner="inner3-4">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png"
class="img-fluid"
alt="Image name"
data-no-lazy /> </div>
<div class="adv-jumbotron-content">
<h4>Title 3-4</h4>
<p> Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
<div class="adv-jumbotron-btns"> <a href="#" class="btn btn-primary rounded-0">View more</a> <a href="#" class="btn btn-secondary rounded-0">View more</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a responsive layout, when the viewport is reduced to mobile size, the secondary tab menu (e.g., "Inner Tab 3-1" and "Inner Tab 3-2" as shown) automatically transforms into a horizontally scrollable navigation bar.
Basic Usage
Please avoid duplicating the reference to the same CSS and JS files.
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/horizontal-tab.css">
JavaScript Instantiation
Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/owl.carousel.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/Horizontal-Tab/initHorizontalTabCarousel.js"></script>
Call the Data tables via JavaScript:
The function initHorizontalTabCarousel accepts two parameters, the ID of the carousel element (e.g., '#tab-carousel'、'#tab-carousel2' and '#tab-carousel3') and the ID of the navigation container (e.g., '#tab-Navs'、'#tab-Navs2' and '#tab-Navs3'). It then initializes the Owl Carousel with the specified settings.
// IInitialize Horizontal-Tab-Carousel
$(document).ready(function () {
initHorizontalDoubleTabCarousel("#tab-carousel","#tab-Navs");
});
// Initialize Horizontal-Tab-Carousel2
$(document).ready(function () {
initHorizontalDoubleTabCarousel("#tab-carousel2","#tab-Navs2");
});
// Initialize Horizontal-Double-Tab-Carousel3
$(document).ready(function () {
initHorizontalDoubleTabCarousel("#tab-carousel3","#tab-Navs3");
});