Tab
Tabs organize related groups of content within the same context. Each tab represents the same level of hierarchy. The labels describe each tab’s content, This component lets users navigate between related sections of content, displaying one section at a time.
Tabs transform to accordions on smaller screens to ensure each tab item is still visible to the user without the need for scrolling.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files l coc-accordion-tabs.js
Functional grouping: Containers
Demo
Section 01
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Section 02
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Section 03
| Icon | Text | Description |
|---|---|---|
| Singles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|
| Couples |
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. |
|
| Families |
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore:
|
Section 04
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Section 05
| Text | Icon | Description |
|---|---|---|
| Singles |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
|
| Couples |
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. |
|
| Families |
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore:
|
Section 06
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Code
Responsive preview
Usage best practices
| Number of tabs | Label character limit |
|---|---|
| 2 | 30 characters/tab |
| 3 | 20 characters/tab |
| 4 | 15 characters/tab |
| 5 | 12 characters/tab |
| 6 | 10 characters/tab |
Consider using tabs:
- when users do not need to see content from multiple tabs simultaneously
- to display grouped content - ensure that a tab label accurately describes that tab’s content
Do
Use clear and succinct tab labels.
Order tabs according to user needs.
Apply character limits for the tab labels to prevent breaking the layout.
The maximum number of tabs may need to be adjusted depending on the width of the content area.
Don't
Do not use more than 6 tabs, otherwise the layout may appear broken.
Do not use tabs to present sequential content that needs to be read in a particular order.
Do not use for comparing content across multiple tabs, such as different sizes of the same item.