# Tabs in cumulocity components?

**URL:** <https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [September 10, 2024, 8:26am UTC](https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091 "2024-09-10T08:26:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [September 10, 2024, 8:26am UTC](https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091/1 "2024-09-10T08:26:05Z")

</div>

#### _ **Product/components** used and **version/fix** level:_

#### _Detailed explanation of the problem:_

I would like to use Tabs in custom plugin component, similar to Angular Material Tabs, as referenced below.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/2/22ea6cf79d2e6df52607b802cee4ff733fd285da.png)

However, I am unable to find tabs in [codex](https://styleguide.cumulocity.com/apps/codex/#/). While i see an example of tabs in the context dashboards, my use case is different. I want all the tabs in single component where one tab is dependent with another. Each tab has its form and user must fill to navigate to next tab.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/b/6/b60ef0af8b7dafbe0521b026cebdfc9fc9c907b2.png)

#### _Question related to a **free trial** , or to a **production (customer)** instance?_

Production

_Regards_  
_Mohan_

---

<div class="post-metadata">

**Author:** ![jtrac](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@jtrac](https://community.cumulocity.com/u/jtrac)\
**Post date:** [September 10, 2024, 10:43pm UTC](https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091/2 "2024-09-10T22:43:07Z")

</div>

Hi Mohan,

Cumulocity comes pre-packaged with [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/#/). You can use the tabs component from ngx-bootstrap directly in your cumulocity project: [Angular Bootstrap](https://valor-software.com/ngx-bootstrap/#/components/tabs?tab=overview)

To use the tabs, import the module:

```auto
import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
  imports: [TabsModule.forRoot(),...]
})
export class AppModule(){}

```

Then you can use tabs like so:

```html
<div>
  <tabset>
    <tab heading="Basic title" id="tab1">Basic content</tab>
    <tab heading="Basic Title 1">Basic content 1</tab>
    <tab heading="Basic Title 2">Basic content 2</tab>
  </tabset>
</div>

```

Cheers,  
Jimmy

---

<div class="post-metadata">

**Author:** ![Mohan\_Pathapataa](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/mohan_pathapataa/32/11730_2.png) [@Mohan\_Pathapataa](https://community.cumulocity.com/u/Mohan_Pathapataa)\
**Post date:** [September 13, 2024, 10:09am UTC](https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091/3 "2024-09-13T10:09:19Z")

</div>

Thanks Jimmy,

Regards  
Mohan

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [March 12, 2025, 10:09am UTC](https://community.cumulocity.com/t/tabs-in-cumulocity-components/4091/4 "2025-03-12T10:09:55Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.