Tabs
navigationTabs organize groups of related content that are at the same level of hierarchy. They enable navigation between different views.
Variants
Primary
DefaultPrimary tabs at top of content pane under app bar
Secondary
Secondary tabs within content area to further separate content
Properties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
variant |
enum |
- | primary |
Type of tabs |
autoActivate |
boolean |
- | - | Automatically select tab when focused |
activeTabIndex |
number |
- | - | Index of the active tab |
States
inactive
Tab is not selected
active
Tab is currently selected
hovered
Mouse hover state
focused
Keyboard focus state
pressed
Active/pressed state
Accessibility
Role:
tablist
Keyboard Support:
- Tab - Move focus into/out of tab list
- ArrowLeft - Move to previous tab
- ArrowRight - Move to next tab
- Home - Move to first tab
- End - Move to last tab
- Enter/Space - Activate focused tab
Screen Reader Notes: Tab bar needs aria-label. Each tab should reference its panel with aria-controls. Panels need role="tabpanel" and aria-labelledby.
LLM Context
Intent: Navigate between related content views at the same hierarchy level
Anti-Patterns:
- Tabs without aria-label on container
- Tab panels without proper ARIA relationship
- Too many tabs (more than 5-7)
- Mixing primary and secondary tabs
- Tabs for unrelated content
Example Usage:
<md-tabs><md-primary-tab>Photos</md-primary-tab><md-primary-tab>Videos</md-primary-tab></md-tabs><md-tabs><md-primary-tab active>Music</md-primary-tab><md-primary-tab>Podcasts</md-primary-tab></md-tabs><md-tabs aria-label="Content type"><md-secondary-tab>All</md-secondary-tab><md-secondary-tab>Favorites</md-secondary-tab></md-tabs>