#  Tabs 

 



 ##  

  expand\_more  

 
  

 

## How to add a Tabs component

### Step 1: Add and configure Tabs component

1. Add a Tabs component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Section Heading** tab to add an optional section that appears at the top of the Tabs component (see [Adding a component heading](/adding-section-heading "Adding a section heading") for details about adding a section heading).
3. Select the **Block Settings** tab.
4. Add an optional **Page Anchor Link** to allow for links to the Tabs component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
5. Select the **Color Settings** tab.
6. Select a color scheme from the **Component Color Scheme** menu and review the **Component Color Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add a Tab item

1. Select the **Content** tab and select the **Add Tab** button.
2. Enter a descriptive heading for the Tab in the **Tab Title** field. The heading also serves as the button label for selecting the Tab.
3. Click within the **Body** area. You can add content, images, and quotes within this section (see [Text Editor](/resource/text-editor "Text Editor") for details about using the toolbar and text input area). Add your content for the Tab in this area.
4. Add additional components to the Tab content area by selecting the **Choose component** button in the **Components** section. Only use components that will display properly within a Tab.

### Step 4: Save Tab component

1. Preview the Tab item in the **Tabs** section of the **Create new Tab** dialog. You can add more Tab items by clicking the plus sign below the first Tab item.
2. Once you have finished adding Tab items, choose **Save** to save the Tabs component.



 

---

 

##  Learn more about Tabs 

 



 ### Examples

Demo Site

See an example of a Tabs component on the [Graduate page](https://drupaldemo.harvardsites.harvard.edu/graduate#example-tabs) of the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Best Practices

Design System Website

Learn [best practices for using a Tabs component](https://designsystem.harvardsites.harvard.edu/tabs) from the Harvard Digital Design System website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew_0.png?itok=qf89ktBL) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [supporting scanning and understanding](https://accessibility.huit.harvard.edu/support-scanning-and-understanding) from the Harvard Digital Accessibility website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)