eds-tabs

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Links as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the links as a JSON string:

Here the links attribute is a string. Your getter will parse it into an array of objects.

Passing Links as an Object (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the links directly as an object:

In React

Example with Slot Content

Example with Dynamic Content Rendering

There are two parts:

Let’s add some javascript logic to interact with the tabs component

Create a new tabs.js file and store it in your application.

Complete React Example

Overview

EdsTabs is a modern tabs component with a pill-shaped container design. Features a clean, minimal interface with smooth transitions and two variant styles.

Key features:

• Default variant (dark background) and inverse variant (light background)
• Pill-shaped container with rounded tabs
• Smooth hover and active state transitions
• Keyboard navigation support (Arrow keys, Home, End)
• Analytics tracking integration
• Accessible with proper ARIA attributes

Properties

Events

Built with StencilJS