On this page

Angular Tabs Component

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.

Introduced in5.2.0+

Examples

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

Home tab content

Profile tab content

Contact tab content

Disabled tab content

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 thevariant prop, the component will default to a basic style.

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Pills

Take that same code, but usevariant="pills" instead:

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Underline

With the same code, usevariant="underline":

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Underline border

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

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Tabs layout

Fill

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

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Justify

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

Home tab content

Profile tab content

Contact tab content

Disabled tab content

Accessibility

Dynamic tabbed interfaces, as described in theWAI ARIA Authoring Practices, requirerole="tablist",role="tab",role="tabpanel", and additionalaria- 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 roletablist.
Each element that serves as a tab has the roletab and is contained within the element with the roletablist.
Each element that contains the content panel for a tab has the roletabpanel.
If the tab list has a visible label, the element with the roletablist hasaria-labelledby set to a value that refers to the labeling element. Otherwise, thetablist element has a label provided byaria-label.
Each element with the roletab has the propertyaria-controls referring to its associatedtabpanel element.
The active tab element has the statearia-selected set totrue, and all other tab elements have it set tofalse.
Each element with the roletabpanel has the propertyaria-labelledby referring to its associatedtab element.

CoreUI Angular Tabs component automatically manages allrole="..." andaria- attributes for accessibility. It also handles the selected state by addingaria-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 setaria-controls, andaria-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"}
&lt;div [ngStyle]="vars"&gt;&lt;/div&gt;

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

componentexportAs: cTabs

Inputs

name	description	type	default
`activeItemKey`	Preset the active item key.	`number` \|`string`	undefined
`id`	HTML id attribute.	`string`	tabs-n

Outputs

name	description	type
`activeItemKeyChange`	Event emitted on`activeItemKey` change.	`number` \|`string`

c-tabs-list

componentexportAs: cTabsList

Inputs

name	description	type	default
`layout`	Specify a layout type for tabs list	`fill` \|`justified`	undefined
`variant`	Set the variant of tabs	`pills` \|`tabs` \|`underline` \|`underline-border`	undefined
`role`	Role attribute	`string`	tablist

cTab

directiveexportAs: cTab

Inputs

name	description	type	default
`disabled`	Disabled button attribute	`boolean`	false
`itemKey`	Item key	`string` \|`number`	(required)
`id`	HTML id attribute	`string`	undefined
`aria-controls`	aria-controls attribute	`string`	undefined

c-tabs-content

componentexportAs: cTabsContent

wrapper for tab panels

c-tab-panel

componentexportAs: cTabPanel

Inputs

name	description	type	default
`ariaLabelledBy`	aria-labelledby attribute	`string`	undefined
`id`	HTML id attribute	`string`	undefined
`itemKey`	Item key	`string` \|`number`	(required)
`tabindex`	Tabindex attribute	`number`	0
`transition`	Enable fade in transition	`boolean`	true

Outputs

name	description	type
`visibleChange`	Event emitted on visible change.	`{ itemKey: string \| number; visible: boolean }`

Movatterモバイル変換

Angular Tabs Component

Examples

Available styles

Unstyled

Pills

Underline

Underline border

Tabs layout

Fill

Justify

Accessibility

WAI-ARIA Roles

Keyboard Interaction

Customizing

CSS variables

How to use CSS variables

SASS variables

API reference

Tabs2Module

c-tabs

Inputs

Outputs

c-tabs-list

Inputs

cTab

Inputs

c-tabs-content

c-tab-panel

Inputs

Outputs