Tabs

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

The Tabs component makes light work of creating a tabbed interface with the Bootstrap JavaScript plugin built in.Make sure you set one of your Tabs to active via your data.

Tab 1 text

Tab 2 text

Tab 3 text

Astro file

---
import { Tabs } from 'astro-bootstrap';
import type { TabsType } from 'astro-bootstrap'
const tabs: TabsType[] = [
  { title: 'Tab 1', body: 'Tab 1 text', active: true },
  { title: 'Tab 2', body: 'Tab 2 text' },
  { title: 'Tab 3', body: 'Tab 3 text' },
];
---

<Tabs tabs={tabs} id="exampleTabs" contentClass="p-3" fade />

API

Tabs

import { Tabs } from 'astro-bootstrap'

Name	Type	Default	Description
tabs ^required	{ title: string; body: string; active: boolean}[]		Data for populating tabs.
id	string		Append `id` to `tab` div.
fade	boolean	`true`	Enable fade transition between tabs.
listClass	string		Append `class` to `nav-tabs` div. (`Tabs.List` component)
itemClass	string		Append `class` to `nav-item` div.
contentClass	string		Append `class` to `nav-content` div.
paneClass	string		Append `class` to `nav-pane` div.