Angular Tabs Component

Tabs

The CoreUI Angular Tabs component offers a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.

Available in Other JavaScript Frameworks

CoreUI Angular Tabs Component is also available for React and Vue. Explore framework-specific implementations below:

On this page

Added in v5.2.0

Examples

The basic Angular tabs example uses the variant="tabs" prop to generate a tabbed interface.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';
import { cilHome } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module, IconDirective, IconDirective]
})
export class TabsComponent {
  cilHome = cilHome;

  handleChange($event: string | number | undefined) {
    console.log('handleChange', $event);
  }
}

<c-tabs [activeItemKey]="'profile'" (activeItemKeyChange)="handleChange($event)">
  <c-tabs-list variant="tabs">
    <button cTab itemKey="home"> <svg [cIcon]="cilHome"></svg> Home</button>
    <button cTab itemKey="profile">Profile</button>
    <button cTab itemKey="contact">Contact</button>
    <button cTab itemKey="disabled" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" itemKey="home">
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" itemKey="profile">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" itemKey="contact">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" itemKey="disabled">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Available styles

Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own.

Unstyled

If you don’t provide the variant prop, the component will default to a basic style.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-unstyled',
  templateUrl: './tabs-unstyled.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsUnstyledComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list>
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Pills

Take that same code, but use variant="pills" instead:

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-pills',
  templateUrl: './tabs-pills.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsPillsComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list variant="pills">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Underline

With the same code, use variant="underline":

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-underline',
  templateUrl: './tabs-underline.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsUnderlineComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list variant="underline">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Underline border

Use the same code again, with variant="underline-border":

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-underline-border',
  templateUrl: './tabs-underline-border.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsUnderlineBorderComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list variant="underline-border">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Enclosed

Added in v5.7.24

Use variant="enclosed" to give the tabs a subtle border and rounded styling.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-enclosed',
  templateUrl: './tabs-enclosed.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsEnclosedComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list variant="enclosed">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Enclosed pills

Added in v5.7.24

Use variant="enclosed-pills" for a pill-style appearance of each tab, with pill-shaped borders and smoother outlines.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-enclosed-pills',
  templateUrl: './tabs-enclosed-pills.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsEnclosedPillsComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list variant="enclosed-pills">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Tabs layout

Fill

Force your tabs content to extend the full available width one of modifier classes. To proportionately fill all available space use layout="fill". With all horizontal space occupied, not every tab item has the same width.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-fill',
  templateUrl: './tabs-fill.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsFillComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list layout="fill" variant="tabs">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile tab with longer content</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Justify

For equal-width elements, use layout="justified". All horizontal space is occupied by tabs, but unlike the layout="fill" above, every tab item has the same width.

import { Component } from '@angular/core';
import { Tabs2Module } from '@coreui/angular';

@Component({
  selector: 'docs-tabs-justify',
  templateUrl: './tabs-justify.component.html',
  styleUrls: ['./tabs.component.scss'],
  imports: [Tabs2Module]
})
export class TabsJustifyComponent {}

<c-tabs [activeItemKey]="1" >
  <c-tabs-list layout="justified" variant="tabs">
    <button cTab [itemKey]="0">Home</button>
    <button cTab [itemKey]="1">Profile details</button>
    <button cTab [itemKey]="2">Contact</button>
    <button cTab [itemKey]="3" disabled>Disabled</button>
  </c-tabs-list>
  <c-tabs-content>
    <c-tab-panel class="p-3" [itemKey]="0" >
      <strong>Home</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="1">
      <strong>Profile</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="2">
      <strong>Contact</strong> tab content
    </c-tab-panel>
    <c-tab-panel class="p-3" [itemKey]="3">
      <strong>Disabled</strong> tab content
    </c-tab-panel>
  </c-tabs-content>
</c-tabs>

:host {
  height: 6rem;
  display: block;
}

Accessibility

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

WAI-ARIA Roles

The element that serves as the container for the set of tabs has the role tablist.
Each element that serves as a tab has the role tab and is contained within the element with the role tablist.
Each element that contains the content panel for a tab has the role tabpanel.
If the tab list has a visible label, the element with the role tablist has aria-labelledby set to a value that refers to the labeling element. Otherwise, the tablist element has a label provided by aria-label.
Each element with the role tab has the property aria-controls referring to its associated tabpanel element.
The active tab element has the state aria-selected set to true, and all other tab elements have it set to false.
Each element with the role tabpanel has the property aria-labelledby referring to its associated tab element.

CoreUI Angular Tabs component automatically manages all role="..." and aria- attributes for accessibility. It also handles the selected state by adding aria-selected="true" to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below. This example demonstrates how to manually set aria-controls, and aria-labelledby attributes on your tabs and tab panels.

Keyboard Interaction

When focus enters the tabs list:

Tab: It places focus on the active tab element.

When focus is on a tab element:

Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier.
Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab.
Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab.
Home: Moves focus to the first tab.
End: Moves focus to the last tab.

Customizing

CSS variables

CoreUI Angular tabs use local CSS variables on .nav, .nav-tabs, .nav-pills, .nav-underline and .nav-underline-border for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

On the .nav base class:

--cui-nav-link-padding-x: #{$nav-link-padding-x};
--cui-nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --cui-nav-link-font-size);
--cui-nav-link-font-weight: #{$nav-link-font-weight};
--cui-nav-link-color: #{$nav-link-color};
--cui-nav-link-hover-color: #{$nav-link-hover-color};
--cui-nav-link-disabled-color: #{$nav-link-disabled-color};

On the .nav-tabs modifier class:

--cui-nav-tabs-border-width: #{$nav-tabs-border-width};
--cui-nav-tabs-border-color: #{$nav-tabs-border-color};
--cui-nav-tabs-border-radius: #{$nav-tabs-border-radius};
--cui-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--cui-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--cui-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--cui-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

On the .nav-pills modifier class:

--cui-nav-pills-border-radius: #{$nav-pills-border-radius};
--cui-nav-pills-link-active-color: #{$nav-pills-link-active-color};
--cui-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

On the .nav-underline-border modifier class:

--cui-nav-underline-border-gap: #{$nav-underline-border-gap};
--cui-nav-underline-border-border-color: #{$nav-underline-border-border-color};
--cui-nav-underline-border-border-width: #{$nav-underline-border-border-width};
--cui-nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
--cui-nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
--cui-nav-underline-border-link-color: #{$nav-underline-border-link-color};
--cui-nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
--cui-nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};

How to use CSS variables

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}

<div [ngStyle]="vars"></div>

SASS variables

$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-font-size:                null !default;
$nav-link-font-weight:              null !default;
$nav-link-color:                    var(--cui-link-color) !default;
$nav-link-hover-color:              var(--cui-link-hover-color) !default;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color:           var(--cui-secondary-color) !default;
$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;

$nav-tabs-border-color:             var(--cui-border-color) !default;
$nav-tabs-border-width:             var(--cui-border-width) !default;
$nav-tabs-border-radius:            var(--cui-border-radius) !default;
$nav-tabs-link-hover-border-color:  var(--cui-secondary-bg) var(--cui-secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        var(--cui-emphasis-color) !default;
$nav-tabs-link-active-bg:           var(--cui-body-bg) !default;
$nav-tabs-link-active-border-color: var(--cui-border-color) var(--cui-border-color) $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           var(--cui-border-radius) !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

$nav-underline-gap:                 1rem !default;
$nav-underline-border-width:        .125rem !default;
$nav-underline-link-active-color:   var(--cui-emphasis-color) !default;

$nav-underline-border-gap:                  .5rem !default;
$nav-underline-border-border-color:         var(--cui-border-color) !default;
$nav-underline-border-border-width:         .125rem !default;
$nav-underline-border-link-padding-y:       .5rem !default;
$nav-underline-border-link-padding-x:       .5rem !default;
$nav-underline-border-link-color:           var(--cui-secondary-color) !default;
$nav-underline-border-link-active-color:    var(--cui-primary) !default;
$nav-underline-border-link-disabled-color:  var(--cui-tertiary-color) !default;

API reference

Tabs2Module

with standalone components:

import { Tabs2Module } from '@coreui/angular';

@Component({
    selector: 'your-component',
    standalone: true,
    imports: [Tabs2Module]
})
export class YourComponent() { }

with NgModules:

import { Tabs2Module } from '@coreui/angular';

@NgModule({
    imports: [Tabs2Module]
})
export class YourModule() { }

c-tabs

component exportAs: cTabs

jsx

import { TabsComponent } from '@coreui/angular'

Props

Property	Default	Type
activeItemKey	-	`string`, `number`
The active item key.
id	`tabs-{n}`	`string`
HTML id attribute.

Events

Event name

Event name
activeItemKeyChange
Emitted when `activeItemKey` changes. `$event` `string \| number \| undefined`

activeItemKeyChange

Emitted when activeItemKey changes.

$event string | number | undefined

c-tabs-list

component exportAs: cTabsList

jsx

import { TabsListComponent } from '@coreui/angular'

Property	Default	Type
layout	`undefined`	`'fill'`, `'justified'`
Specify a layout type for component.
role	`'tablist'`	`string`
Set the role to tab list.
variant	`undefined`	`'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'`
Set the variant to tabs, pills, underline or enclosed.

cTab

directive exportAs: cTab

jsx

import { TabDirective } from '@coreui/angular'

Property	Default	Type
aria-controls	`undefined`	`string`
aria-controls attribute
disabled	`false`	`boolean`
Disabled attribute
id	`undefined`	`string`
Element id attribute
itemKey	-	`string`, `number`
Item key.

c-tabs-content

component exportAs: cTabsContent

wrapper for tab panels

jsx

import { TabsContentComponent } from '@coreui/angular'

c-tab-panel

component exportAs: cTabPanel

jsx

import { TabPanelComponent } from '@coreui/angular'

Props

Property	Default	Type
aria-labelledby	`undefined`	`string`
aria-labelledby attribute
id	`undefined`	`string`
Element id attribute
itemKey	-	`string`, `number`
Item key.
role	`'tabpanel'`	`string`
Element role.
tabindex	`0`	`number`
tabindex attribute.
transition	`true`	`boolean`
Enable fade in transition.

Events

Event name

Event name
visibleChange
visible change output `$event` `VisibleChangeEvent`

visibleChange

visible change output

$event VisibleChangeEvent