Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
The Tab Bar contains the Tab Scroller and Tab components.
MDC Tab Bar does not have any variants; however, its subcomponents do. See the Tab Scroller,
Tab, and Tab Indicator documentation for more information.
Style Customization
CSS Classes
CSS Class
Description
mdc-tab-bar
Mandatory.
Sass Mixins
To customize the width of the tab bar, use the following mixin.
Mixin
Description
mdc-tab-bar-width($width)
Customizes the width of the tab bar.
MDCTabBar Properties and Methods
Property
Value Type
Description
focusOnActivate
boolean (write-only)
Sets whether tabs focus themselves when activated. Defaults to true.
useAutomaticActivation
boolean (write-only)
Sets how tabs activate in response to keyboard interaction. Automatic (true) activates as soon as a tab is focused with arrow keys; manual (false) activates only when the user presses space/enter. The default is automatic (true).
Method Signature
Description
activateTab(index: number) => void
Activates the tab at the given index.
scrollIntoView(index: number) => void
Scrolls the tab at the given index into view.
Event Name
Event Data Structure
Description
MDCTabBar:activated
{"detail": {"index": number}}
Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.
Usage within Web Frameworks
If you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCTabBarAdapter
Method Signature
Description
scrollTo(scrollX: number) => void
Scrolls the Tab Scroller to the given position.
incrementScroll(scrollXIncrement: number) => void
Increments the Tab Scroller by the given value.
getScrollPosition() => number
Returns the scroll position of the Tab Scroller.
getScrollContentWidth() => number
Returns the width of the Tab Scroller's scroll content element.
Sets how tabs activate in response to keyboard interaction. Automatic (true) activates as soon as a tab is focused with arrow keys; manual (false) activates only when the user presses space/enter.
handleKeyDown(evt: Event) => void
Handles the logic for the "keydown" event.
handleTabInteraction(evt: Event) => void
Handles the logic for the "MDCTab:interacted" event.