CoreUI Angular Tabs can be used to create a tabbed interface with tabbable regions.
On this page
Tab Panes
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab",
role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state
to users of assistive technologies (such as screen readers).
Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
Examples
Tabs
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
NavComponent,
NavLinkDirective,
TabContentComponent,
TabContentRefDirective,
TabPaneComponent
} from '@coreui/angular';
@Component({
selector: 'docs-tabs-1',
templateUrl: './tabs-1.component.html',
standalone: true,
imports: [
NavComponent,
NavLinkDirective,
TabContentRefDirective,
RouterLink,
TabContentComponent,
TabPaneComponent
]
})
export class Tabs1Component {
onChange($event: number) {
console.log('onChange', $event);
}
}<c-nav variant="tabs">
<a [active]="true" [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="0" cNavLink>Home</a>
<a [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="1" cNavLink>Profile</a>
<a [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="2" cNavLink>Contact</a>
</c-nav>
<c-tab-content #tabContent="cTabContent">
<c-tab-pane class="p-3">
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane class="p-3">
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane class="p-3">
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
</c-tab-content>Pills
import { NgFor } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
NavComponent,
NavItemComponent,
NavLinkDirective,
TabContentComponent,
TabContentRefDirective,
TabPaneComponent
} from '@coreui/angular';
@Component({
selector: 'docs-tabs-1-pills',
templateUrl: './tabs-1-pills.component.html',
standalone: true,
imports: [NavComponent, NgFor, NavItemComponent, NavLinkDirective, TabContentRefDirective, RouterLink, TabContentComponent, TabPaneComponent]
})
export class Tabs1PillsComponent implements OnInit {
public panes = [
{ name: 'Home 01', content: 'One' },
{ name: 'Profile 02', content: 'Two' },
{ name: 'Contact 03', content: 'Three' },
{ name: 'Disabled 04', content: 'Four' }
];
activePane = 0;
onTabChange($event: number) {
this.activePane = $event;
console.log('onTabChange', $event);
}
ngOnInit(): void {
setTimeout(() => {
this.activePane = 1;
setTimeout(() => {
this.activePane = 2;
setTimeout(() => {
this.activePane = 0;
}, 3000);
}, 3000);
}, 3000);
}
}<c-nav variant="pills">
<c-nav-item *ngFor="let nav of panes; index as i; first as isFirst; last as isLast">
<a [cTabContent]="tabContent" [disabled]="isLast" [routerLink] [tabPaneIdx]="i" cNavLink>
{{nav.name}}
</a>
</c-nav-item>
</c-nav>
<c-tab-content #tabContent="cTabContent"
(activeTabPaneIdxChange)="onTabChange($event)"
[activeTabPaneIdx]="activePane">
<c-tab-pane *ngFor="let pane of panes; index as i;" class="p-3">
This is some placeholder content the <strong>{{pane.name}}</strong> tab's associated content. Clicking
another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
</c-tab-pane>
</c-tab-content>
Underline
Notice: conditional rendering of third c-tab-pane with *ngIf disables/enables third cNavLink
import { NgIf } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
NavComponent,
NavItemComponent,
NavLinkDirective,
TabContentComponent,
TabContentRefDirective,
TabPaneComponent
} from '@coreui/angular';
@Component({
selector: 'docs-tabs-1-underline',
templateUrl: './tabs-1-underline.component.html',
standalone: true,
imports: [
NavComponent,
NavItemComponent,
NavLinkDirective,
TabContentRefDirective,
RouterLink,
TabContentComponent,
TabPaneComponent,
NgIf
]
})
export class Tabs1UnderlineComponent {}<c-nav variant="underline">
<c-nav-item>
<a [active]="true" [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="0" cNavLink>
Home
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="1" cNavLink>
Profile
</a>
</c-nav-item>
<c-nav-item>
<a [cTabContent]="tabContent" [routerLink] [tabPaneIdx]="2" cNavLink>
Contact
</a>
</c-nav-item>
</c-nav>
<c-tab-content #tabContent="cTabContent" [activeTabPaneIdx]="1">
<c-tab-pane class="p-3">
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<c-tab-pane class="p-3">
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
<!-- example: *ngIf activeTabPaneIdx === 0 disables third cNavLink -->
<c-tab-pane *ngIf="tabContent.activeTabPaneIdx > 0" class="p-3">
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another tab will
toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility
and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
</c-tab-pane>
</c-tab-content>API reference
Tabs Module
import { NavModule, TabsModule } from '@coreui/angular';
@NgModule({
imports: [
NavModule,
TabsModule
]
})
export class AppModule() { }c-tab-content
component
exportAs: cTabContent
import { TabContentComponent } from '@coreui/angular'Props
Events
c-tab-pane
component
exportAs: cTabPane
import { TabPaneComponent } from '@coreui/angular'cTabContent
directive
import { TabContentRefDirective } from '@coreui/angular'