Component: Tabs 1.1

This builder will allow you to generate a custom version of the Tabs component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Additional Components

In addition to the main component, the following additional components and/or CSS/JS modules have been added to help you build your version of the component:

Content: The inset version of the content block can be used to format the text inside the tabs.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used. There is no orange theme because there would be a lot of bright colors on the screen.

width (attribute)

Width -- constrained to the container (default), full width, or full width but text is constrained (auto), or text is constrained to the page width (page).

horizontal (attribute)

Whether or not to use the horizontal layout. Recommended to not use this unless there are a few tabs.

default (text attribute)

The ID of the tab that is open on load. This defaults to the first item in the list.

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-tabs--display

Flex or block for the tabs list (controls horizontal or vertical layout)

--ilw-tabs--tablist--display

Flex or block for the tabs button list (controls horizontal or vertical layout)

--ilw-tabs--tablist--width

Width of the tabs button list in vertical layout. Defaults to 350px.

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.

Full Version: 1.1.1

Type: web component

Date Created: 10/1/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-tabs/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-tabs/1.1/ilw-tabs.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-tabs/1.1/ilw-tabs.css