Tabs

Requires Javascript to work.

Tabs can be used to diplay a lot of information in a single page by using progressive disclosure. The user gets control to see the content they want to see.

Design Hints

Tabs are powerful tools for displaying a lot of information without cognitive overload for a user. While deciding the content inside the each tab, we have to consider whether the content is relevant to the particular tab or not. Also if a tab has an action, it is recommended that all information required to complete the action is displayed in the tab. If you need more than 5 tabs, consider using other navigational elements. Tabs also may not transfer well over to smaller screens based on the number of tabs.

Accessiblity Hints

For accessibility, it is important to specify the roles associated with the tabs and use `tabindex` to ensure that the tabs perform the expected functionality. Additional javascript is required to make the tabs work with keyboard events. The content inside the panels shoould also be accessible and follow best practices.

Tabs Specification

A tab has three main parts :

The tabs container : The container div or section that wraps the tabs and the tab panels
The tabs list : The list of buttons that serve as label for the tab panels. The related roles are tablist and tab . The attributes are aria-selected, aria-controls and tabindex.
The tab panels : A set of panels that are connected to the tabs list. The related role is tabpanel. The attributes are aria-labelledby and tabindex.

Normal Tabs

The classic tabs with a panel attached to each tab. The tabs are displayed in a horizontal list and the panels are displayed blow the tabs.

This is placeholder content for the product tab

<div id="tab-container-normal-alt">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      <button
        role="tab"
        aria-selected="true"
        aria-controls="tab-panel-1"
        id="tab-1"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <span>Product</span>
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-2"
        id="tab-2"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <span>Info</span>
      </button>
      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-3"
        id="tab-3"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <span>Compare</span>
      </button>
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      <section role="tabpanel" id="tab-panel-1" tabindex="0">
        <p class="p-4">This is placeholder content for the product tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-2" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the info tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-3" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the compare tab</p>
      </section>
    </div>
  </div>
</div>
<script>
  /**
   * Handles keyboard navigation and click events for a set of tabs and their corresponding panels.
   *
   * The function sets up event listeners for the tab list, handling arrow key navigation and tab key focus.
   * It also sets up click event listeners for each tab, which update the selected tab and show/hide the corresponding panel.
   *
   * @param {HTMLElement} tabContainer - The container element for the tabs and panels.
   */
  const tabContainer = document.getElementById("tab-container-normal-alt");
  const tabs = tabContainer.querySelectorAll('[role="tab"]');
  const panels = tabContainer.querySelectorAll('[role="tabpanel"]');
  const tabList = tabContainer.querySelector('[role="tablist"]');
  let tabFocus = 0;
  tabList?.addEventListener("keydown", (e) => {
    if (e.key && tabs) {
      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
        tabs[tabFocus]?.setAttribute("tabindex", "-1");
        if (e.key === "ArrowRight") {
          tabFocus++;
          // If we're at the end, go to the start
          if (tabFocus >= tabs.length) {
            tabFocus = 0;
          }
          // Move left
        } else if (e.key === "ArrowLeft") {
          tabFocus--;
          // If we're at the start, move to the end
          if (tabFocus < 0) {
            tabFocus = tabs.length - 1;
          }
        }
        tabs[tabFocus].setAttribute("tabindex", "0");
        tabs[tabFocus].focus();
      }
      if (e.key === "Tab") {
        tabs.forEach((tabs, index) => {
          if (tabs.getAttribute("aria-selected") === "true") {
            tabs.setAttribute("tabindex", "0");
            tabFocus = index;
          } else {
            tabs.setAttribute("tabindex", "-1");
          }
        });
      }
    }
  });
  tabs?.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((tab) => {
        tab.setAttribute("aria-selected", "false");
        tab.setAttribute("tabindex", "-1");
      });
      tab.setAttribute("aria-selected", "true");
      tab.setAttribute("tabindex", "0");
      const selectedPanel = tab.getAttribute("aria-controls");
      panels?.forEach((panel) => {
        if (panel.id === selectedPanel) {
          panel.classList.remove("hidden");
        } else {
          panel.classList.add("hidden");
        }
      });
    });
  });
</script>

---
const tabs = [
  {
    title: "Product",
    content: "This is placeholder content for the product tab",
  },
  { title: "Info", content: "This is placeholder content for the info tab" },
  {
    title: "Compare",
    content: "This is placeholder content for the compare tab",
  },
];
const name = "exampleTab3"; // Name for aria-labelledby

/*
To dynamically generate tabs with simple text content you can call this component from a page like this:
---
import NTabsAstro from '../components/NTabsAstro.astro';

const tabsData = [
  { title: 'Product', content: 'This is placeholder content for the product tab' },
  { title: 'Info', content: 'This is placeholder content for the info tab' },
  { title: 'Compare', content: 'This is placeholder content for the compare tab' },
];
---

<NTabsAstro tabs={tabsData} />

and the frontmatter for this page would look like this:
---
interface Props {
  tabs: Array<{ title: string; content: string }>;
};
const { tabs } = Astro.props;
---

for more complex content inside the tabs you cannot dynamically generate the tab panel, but can pass the content as named slots with appropriate attributes.
example :
replace
  {tabs.map((tab, index) => (
        <section
          role="tabpanel"
          id={`tab-panel-${index + 1}`}
          tabindex="0"
          class={index === 0 ? '' : 'hidden'}
        >
          <p class="p-2">{tab.content}</p>
        </section>
      ))}
  with
  <slot name="tab1" />
  <slot name="tab2" />
  <slot name="tab3" />
  <!-- Add more slots as needed -->
  and call the component like this:
  ---
  import NTabsAstro from '../components/NTabsAstro.astro';
  const tabsData = [
  { title: 'Product', content: '' },
  { title: 'Info', content: '' },
  { title: 'Compare', content: '' },
  ]; // More tabs can be added here
  ---
  <NTabsAstro tabs={tabsData}>
    <section slot="tab1" role="tabpanel" id="tab-panel-1" tabindex="-1" aria-labelledby="tab-1">
      <!-- content for tab 1 -->
    </section>
    <section slot="tab2" role="tabpanel" id="tab-panel-2" tabindex="-1" class="hidden" aria-labelledby="tab-2">
      <!-- content for tab 2 -->
    </section>
    <section slot="tab3" role="tabpanel" id="tab-panel-3" tabindex="-1" class="hidden" aria-labelledby="tab-3">
      <!-- content for tab 3 -->
    </section>
    <!-- Add more slots as needed -->
  </NTabsAstro>

*/
---

<div id="tab-container-normal">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      {
        tabs.map((tab, index) => (
          <button
            role="tab"
            aria-selected={index === 0 ? "true" : "false"}
            aria-controls={`${name}-tab-panel-${index + 1}`}
            id={`${name}-tab-${index + 1}`}
            class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
          >
            <span>{tab.title}</span>
          </button>
        ))
      }
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      {
        tabs.map((tab, index) => (
          <section
            role="tabpanel"
            id={`${name}-tab-panel-${index + 1}`}
            aria-labelledby={`${name}-tab-${index + 1}`}
            tabindex="-1"
            class={index === 0 ? "" : "hidden"}
          >
            <p class="p-4">{tab.content}</p>
          </section>
        ))
      }
    </div>
  </div>
</div>
<script>
  /**
   * Initializes and manages the tab functionality for a tab interface.
   *
   * This function sets up event listeners for keyboard navigation and click handling on the tab elements.
   * It keeps track of the currently selected tab and updates the corresponding tab panel visibility accordingly.
   */
  function tabs() {
    const tabContainer = document.getElementById(
      "tab-container-normal",
    ) as HTMLElement;
    const tabs = tabContainer?.querySelectorAll(
      '[role="tab"]',
    ) as NodeListOf<HTMLButtonElement>;
    const panels = tabContainer?.querySelectorAll(
      '[role="tabpanel"]',
    ) as NodeListOf<HTMLElement>;
    const tabList = tabContainer?.querySelector(
      '[role="tablist"]',
    ) as HTMLElement;
    if (!tabContainer || !tabs || !panels || !tabList) {
      return;
    }

    let tabFocus = 0;

    tabList?.addEventListener("keydown", (e) => {
      if (e.key && tabs) {
        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
          tabs[tabFocus]?.setAttribute("tabindex", "-1");
          if (e.key === "ArrowRight") {
            tabFocus++;
            // If we're at the end, go to the start
            if (tabFocus >= tabs.length) {
              tabFocus = 0;
            }
            // Move left
          } else if (e.key === "ArrowLeft") {
            tabFocus--;
            // If we're at the start, move to the end
            if (tabFocus < 0) {
              tabFocus = tabs.length - 1;
            }
          }
          tabs[tabFocus].setAttribute("tabindex", "0");
          tabs[tabFocus].focus();
        }
        if (e.key === "Tab") {
          tabs.forEach((tabs, index) => {
            if (tabs.getAttribute("aria-selected") === "true") {
              tabs.setAttribute("tabindex", "0");
              tabFocus = index;
            } else {
              tabs.setAttribute("tabindex", "-1");
            }
          });
        }
      }
    });
    tabs?.forEach((tab) => {
      tab.addEventListener("click", () => {
        tabs.forEach((tab) => {
          tab.setAttribute("aria-selected", "false");
          tab.setAttribute("tabindex", "-1");
        });
        tab.setAttribute("aria-selected", "true");
        tab.setAttribute("tabindex", "0");
        const selectedPanel = tab.getAttribute("aria-controls");
        panels?.forEach((panel) => {
          if (panel.id === selectedPanel) {
            panel.classList.remove("hidden");
          } else {
            panel.classList.add("hidden");
          }
        });
      });
    });
  }

  document.addEventListener("astro:page-load", tabs);
</script>

Normal Tabs With Icons

This adds icons to the tabs while maintaining the same functionality as the normal tabs.

This is placeholder content for the product tab

<div id="tabs-container-icons-alt">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      <button
        role="tab"
        aria-selected="true"
        aria-controls="tab-panel-1"
        id="tab-1"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
          />
        </svg>
        <span>Product</span>
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-2"
        id="tab-2"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
          />
        </svg>
        <span>Info</span>
      </button>
      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-3"
        id="tab-3"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
          />
        </svg>
        <span>Compare</span>
      </button>
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      <section role="tabpanel" id="tab-panel-1" tabindex="0">
        <p class="p-4">This is placeholder content for the product tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-2" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the info tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-3" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the compare tab</p>
      </section>
    </div>
  </div>
</div>
<script>
  /**
   * Handles the keyboard navigation and click events for a set of tabs with icons.
   *
   * The function sets up event listeners on the tab list to handle arrow key navigation,
   * as well as click events on the individual tabs. When a tab is clicked, the function
   * updates the `aria-selected` attribute on the tabs and shows/hides the corresponding
   * tab panel.
   *
   * @param {HTMLElement} tabContainer - The container element for the tabs and panels.
   */
  const tabContainer = document.getElementById("tabs-container-icons-alt");

  const tabs = tabContainer.querySelectorAll('[role="tab"]');
  const panels = tabContainer.querySelectorAll('[role="tabpanel"]');
  const tabList = tabContainer.querySelector('[role="tablist"]');
  let tabFocus = 0;
  tabList?.addEventListener("keydown", (e) => {
    if (e.key && tabs) {
      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
        tabs[tabFocus]?.setAttribute("tabindex", "-1");
        if (e.key === "ArrowRight") {
          tabFocus++;
          // If we're at the end, go to the start
          if (tabFocus >= tabs.length) {
            tabFocus = 0;
          }
          // Move left
        } else if (e.key === "ArrowLeft") {
          tabFocus--;
          // If we're at the start, move to the end
          if (tabFocus < 0) {
            tabFocus = tabs.length - 1;
          }
        }
        tabs[tabFocus].setAttribute("tabindex", "0");
        tabs[tabFocus].focus();
      }
      if (e.key === "Tab") {
        tabs.forEach((tabs, index) => {
          if (tabs.getAttribute("aria-selected") === "true") {
            tabs.setAttribute("tabindex", "0");
            tabFocus = index;
          } else {
            tabs.setAttribute("tabindex", "-1");
          }
        });
      }
    }
  });
  tabs?.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((tab) => {
        tab.setAttribute("aria-selected", "false");
        tab.setAttribute("tabindex", "-1");
      });
      tab.setAttribute("aria-selected", "true");
      tab.setAttribute("tabindex", "0");
      const selectedPanel = tab.getAttribute("aria-controls");
      panels?.forEach((panel) => {
        if (panel.id === selectedPanel) {
          panel.classList.remove("hidden");
        } else {
          panel.classList.add("hidden");
        }
      });
    });
  });
</script>

---
const tabs = [
  {
    title: "Product",
    content: "This is placeholder content for the product tab",
    icon: "product",
  },
  {
    title: "Info",
    content: "This is placeholder content for the info tab",
    icon: "info",
  },
  {
    title: "Compare",
    content: "This is placeholder content for the compare tab",
    icon: "compare",
  },
];
const name = "exampleTab2";

/*
This uses conditional rendering to render the SVGs, but generally you would import them from a separate file like so :
---
import Product from "../../assets/product.astro"
import Info from "../../assets/info.astro"
import Compare from "../../assets/compare.astro"
---
Note : svg files can be saved as .astro files and imported as above without changing any code inside the file.

and you would render them like this :
{tab.icon === "product" && <Product />}
{tab.icon === "info" && <Info />}
{tab.icon === "compare" && <Compare />}

This will aid in the separation of concerns and make the code more maintainable.
*/
---

<div id="tab-container-icons">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      {
        tabs.map((tab, index) => (
          <button
            role="tab"
            aria-selected={index === 0 ? "true" : "false"}
            aria-controls={`${name}-tab-panel-${index + 1}`}
            id={`${name}-tab-${index + 1}`}
            class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-indigo-700 aria-selected:text-gray-100 md:px-6 md:text-base dark:hover:bg-zinc-800 dark:aria-selected:bg-indigo-900"
          >
            {tab.icon === "product" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
                />
              </svg>
            )}
            {tab.icon === "info" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
                />
              </svg>
            )}
            {tab.icon === "compare" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
                />
              </svg>
            )}

            <span>{tab.title}</span>
          </button>
        ))
      }
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      {
        tabs.map((tab, index) => (
          <section
            role="tabpanel"
            id={`${name}-tab-panel-${index + 1}`}
            aria-labelledby={`${name}-tab-${index + 1}`}
            tabindex="0"
            class={index === 0 ? "" : "hidden"}
          >
            <p class="p-4">{tab.content}</p>
          </section>
        ))
      }
    </div>
  </div>
</div>
<script>
  /**
   * Initializes the normal tabs with icons functionality.
   * This function sets up event listeners for keyboard navigation and click handling on the tabs.
   * It also manages the visibility of the tab panels based on the selected tab.
   */
  function normalTabsWithIcons() {
    const tabContainer = document.getElementById(
      "tab-container-icons",
    ) as HTMLElement;
    const tabs = tabContainer?.querySelectorAll(
      '[role="tab"]',
    ) as NodeListOf<HTMLButtonElement>;
    const panels = tabContainer?.querySelectorAll(
      '[role="tabpanel"]',
    ) as NodeListOf<HTMLElement>;
    const tabList = tabContainer?.querySelector(
      '[role="tablist"]',
    ) as HTMLElement;
    if (!tabContainer || !tabs || !panels || !tabList) {
      return;
    }
    let tabFocus = 0;
    tabList?.addEventListener("keydown", (e) => {
      if (e.key && tabs) {
        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
          tabs[tabFocus]?.setAttribute("tabindex", "-1");
          if (e.key === "ArrowRight") {
            tabFocus++;
            // If we're at the end, go to the start
            if (tabFocus >= tabs.length) {
              tabFocus = 0;
            }
            // Move left
          } else if (e.key === "ArrowLeft") {
            tabFocus--;
            // If we're at the start, move to the end
            if (tabFocus < 0) {
              tabFocus = tabs.length - 1;
            }
          }
          tabs[tabFocus].setAttribute("tabindex", "0");
          tabs[tabFocus].focus();
        }
        if (e.key === "Tab") {
          tabs.forEach((tabs, index) => {
            if (tabs.getAttribute("aria-selected") === "true") {
              tabs.setAttribute("tabindex", "0");
              tabFocus = index;
            } else {
              tabs.setAttribute("tabindex", "-1");
            }
          });
        }
      }
    });
    tabs?.forEach((tab) => {
      tab.addEventListener("click", () => {
        tabs.forEach((tab) => {
          tab.setAttribute("aria-selected", "false");
          tab.setAttribute("tabindex", "-1");
        });
        tab.setAttribute("aria-selected", "true");
        tab.setAttribute("tabindex", "0");
        const selectedPanel = tab.getAttribute("aria-controls");
        panels?.forEach((panel) => {
          if (panel.id === selectedPanel) {
            panel.classList.remove("hidden");
          } else {
            panel.classList.add("hidden");
          }
        });
      });
    });
  }
  document.addEventListener("astro:page-load", normalTabsWithIcons);
</script>

Gradient Tabs With Icons

The selected tab is highlighted with a gradient background. Otherwise the tabs are similar to the normal tabs with icons.

This is placeholder content for the product tab

<div id="tab-container-gradient-alt">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      <button
        role="tab"
        aria-selected="true"
        aria-controls="tab-panel-1"
        id="tab-1"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg from-purple-500 to-purple-900 px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-gradient-to-l aria-selected:text-white md:px-6 md:text-base dark:hover:bg-zinc-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
          />
        </svg>
        <span>Product</span>
      </button>

      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-2"
        id="tab-2"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg from-purple-500 via-purple-800 to-purple-900 px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-gradient-to-l aria-selected:text-white md:px-6 md:text-base dark:hover:bg-zinc-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
          />
        </svg>
        <span>Info</span>
      </button>
      <button
        role="tab"
        aria-selected="false"
        aria-controls="tab-panel-3"
        id="tab-3"
        class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg from-purple-500 via-purple-800 to-purple-900 px-2 py-3 text-sm hover:bg-gray-200 aria-selected:bg-gradient-to-l aria-selected:text-white md:px-6 md:text-base dark:hover:bg-zinc-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
          />
        </svg>
        <span>Compare</span>
      </button>
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      <section role="tabpanel" id="tab-panel-1" tabindex="0">
        <p class="p-4">This is placeholder content for the product tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-2" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the info tab</p>
      </section>
      <section role="tabpanel" id="tab-panel-3" tabindex="0" class="hidden">
        <p class="p-4">This is placeholder content for the compare tab</p>
      </section>
    </div>
  </div>
</div>
<script>
  /**
   * Handles keyboard navigation and click events for a set of tabs and their corresponding panels.
   *
   * The tab container element must have the following structure:
   * - A container element with `role="tablist"` that holds the tab elements.
   * - Tab elements with `role="tab"`.
   * - Panel elements with `role="tabpanel"` that correspond to the tabs.
   *
   * This function sets up the necessary event listeners and state management to ensure
   * proper accessibility and functionality of the tabs.
   */
  const tabContainer = document.getElementById("tab-container-gradient-alt");
  const tabs = tabContainer.querySelectorAll('[role="tab"]');
  const panels = tabContainer.querySelectorAll('[role="tabpanel"]');
  const tabList = tabContainer.querySelector('[role="tablist"]');
  let tabFocus = 0;
  tabList?.addEventListener("keydown", (e) => {
    if (e.key && tabs) {
      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
        tabs[tabFocus]?.setAttribute("tabindex", "-1");
        if (e.key === "ArrowRight") {
          tabFocus++;
          // If we're at the end, go to the start
          if (tabFocus >= tabs.length) {
            tabFocus = 0;
          }
          // Move left
        } else if (e.key === "ArrowLeft") {
          tabFocus--;
          // If we're at the start, move to the end
          if (tabFocus < 0) {
            tabFocus = tabs.length - 1;
          }
        }
        tabs[tabFocus].setAttribute("tabindex", "0");
        tabs[tabFocus].focus();
      }
      if (e.key === "Tab") {
        tabs.forEach((tabs, index) => {
          if (tabs.getAttribute("aria-selected") === "true") {
            tabs.setAttribute("tabindex", "0");
            tabFocus = index;
          } else {
            tabs.setAttribute("tabindex", "-1");
          }
        });
      }
    }
  });
  tabs?.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((tab) => {
        tab.setAttribute("aria-selected", "false");
        tab.setAttribute("tabindex", "-1");
      });
      tab.setAttribute("aria-selected", "true");
      tab.setAttribute("tabindex", "0");
      const selectedPanel = tab.getAttribute("aria-controls");
      panels?.forEach((panel) => {
        if (panel.id === selectedPanel) {
          panel.classList.remove("hidden");
        } else {
          panel.classList.add("hidden");
        }
      });
    });
  });
</script>

---
const tabs = [
  {
    title: "Product",
    content: "This is placeholder content for the product tab",
    icon: "product",
  },
  {
    title: "Info",
    content: "This is placeholder content for the info tab",
    icon: "info",
  },
  {
    title: "Compare",
    content: "This is placeholder content for the compare tab",
    icon: "compare",
  },
];
const name = "exampleTab1"; // Name for unique aria labels

/*
This uses conditional rendering to render the SVGs, but generally you would import them from a separate file like so :
---
import Product from "../../assets/product.astro"
import Info from "../../assets/info.astro"
import Compare from "../../assets/compare.astro"
---
Note : svg files can be saved as .astro files and imported as above without changing any code inside the file.

and you would render them like this :
{tab.icon === "product" && <Product />}
{tab.icon === "info" && <Info />}
{tab.icon === "compare" && <Compare />}

This will aid in the separation of concerns and make the code more maintainable.
*/
---

<div id="tab-container-gradient">
  <div class="mb-12 text-zinc-900 dark:text-zinc-50">
    <div
      class="my-4 flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-[4px] dark:border-zinc-800 dark:bg-zinc-950"
      role="tablist"
    >
      {
        tabs.map((tab, index) => (
          <button
            role="tab"
            aria-selected={index === 0 ? "true" : "false"}
            aria-controls={`${name}-tab-panel-${index + 1}`}
            id={`${name}-tab-${index + 1}`}
            class="flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm outline-offset-4 outline-black hover:bg-gray-200 focus:outline-4 aria-selected:bg-gradient-to-l aria-selected:from-purple-500 aria-selected:via-purple-800 aria-selected:to-purple-900 aria-selected:text-white md:px-6 md:text-base dark:outline-white dark:hover:bg-zinc-800"
          >
            {tab.icon === "product" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
                />
              </svg>
            )}
            {tab.icon === "info" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
                />
              </svg>
            )}
            {tab.icon === "compare" && (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
                />
              </svg>
            )}

            <span>{tab.title}</span>
          </button>
        ))
      }
    </div>
    <div
      class="rounded-xl border border-gray-400 bg-gray-50 p-[4px] text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200"
    >
      {
        tabs.map((tab, index) => (
          <section
            role="tabpanel"
            id={`${name}-tab-panel-${index + 1}`}
            aria-labelledby={`${name}-tab-${index + 1}`}
            tabindex="0"
            class={index === 0 ? "" : "hidden"}
          >
            <p class="p-4">{tab.content}</p>
          </section>
        ))
      }
    </div>
  </div>
</div>
<script>
  /**
   * Initializes the gradient tabs functionality on the page.
   * This function sets up event listeners for keyboard navigation and click handling on the tab elements.
   * It also manages the visibility of the tab panels based on the selected tab.
   */
  function gradientTabs() {
    const tabContainer = document.getElementById(
      "tab-container-gradient",
    ) as HTMLElement;
    const tabs = tabContainer?.querySelectorAll(
      '[role="tab"]',
    ) as NodeListOf<HTMLButtonElement>;
    const panels = tabContainer?.querySelectorAll(
      '[role="tabpanel"]',
    ) as NodeListOf<HTMLElement>;
    const tabList = tabContainer?.querySelector(
      '[role="tablist"]',
    ) as HTMLElement;
    if (!tabContainer || !tabs || !panels || !tabList) {
      return;
    }
    let tabFocus = 0;
    tabList?.addEventListener("keydown", (e) => {
      if (e.key && tabs) {
        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
          tabs[tabFocus]?.setAttribute("tabindex", "-1");
          if (e.key === "ArrowRight") {
            tabFocus++;
            // If we're at the end, go to the start
            if (tabFocus >= tabs.length) {
              tabFocus = 0;
            }
            // Move left
          } else if (e.key === "ArrowLeft") {
            tabFocus--;
            // If we're at the start, move to the end
            if (tabFocus < 0) {
              tabFocus = tabs.length - 1;
            }
          }
          tabs[tabFocus].setAttribute("tabindex", "0");
          tabs[tabFocus].focus();
        }
        if (e.key === "Tab") {
          tabs.forEach((tabs, index) => {
            if (tabs.getAttribute("aria-selected") === "true") {
              tabs.setAttribute("tabindex", "0");
              tabFocus = index;
            } else {
              tabs.setAttribute("tabindex", "-1");
            }
          });
        }
      }
    });
    tabs?.forEach((tab) => {
      tab.addEventListener("click", () => {
        tabs.forEach((tab) => {
          tab.setAttribute("aria-selected", "false");
          tab.setAttribute("tabindex", "-1");
        });
        tab.setAttribute("aria-selected", "true");
        tab.setAttribute("tabindex", "0");
        const selectedPanel = tab.getAttribute("aria-controls");
        panels?.forEach((panel) => {
          if (panel.id === selectedPanel) {
            panel.classList.remove("hidden");
          } else {
            panel.classList.add("hidden");
          }
        });
      });
    });
  }
  document.addEventListener("astro:page-load", gradientTabs);
</script>

Note: The color of the gradient tabs can be changed by changing the from-purple-500 via-purple-800 to-purple-900 in the <button> tag. You can generate different gradients using the Tailwind Gradient Generator

Astrojs Web Component Tabs

Requires Astrojs to work.

This is an astrojs web component implementation of the tabs. It allows for any sort of content to be displayed in the tabs. It also dynamically generates the tab buttons based on the number of tabs. It has many additional features such as dynamically adding icons, allowing for custom tab buttons, tab panels. It also allows for the tabs to have vertical alignment and act like a sidebar to the panel.

Product Overview

This is a fantastic product that solves all your problems.

Data Overview

Wow

Alice: Great product, would buy again!
Bob: Fast shipping, good quality.
Carol: Exactly what I needed.

Product Overview

This is a fantastic product that solves all your problems.

Alice: Great product, would buy again!
Bob: Fast shipping, good quality.
Carol: Exactly what I needed.

---
interface Props {
  defaultActive?: string;
  orientation?: "horizontal" | "vertical";
}

const { defaultActive = "0", orientation = "horizontal" } =
  Astro.props as Props;
---

<x-tabs
  data-default-active={defaultActive}
  class="flex flex-col gap-y-4 text-zinc-900 dark:text-zinc-50"
>
  <div
    class="flex w-full flex-row gap-x-4 rounded-xl border border-gray-400 bg-gray-50 p-1 dark:border-zinc-800 dark:bg-zinc-950"
    role="tablist"
    aria-orientation={orientation}
  >
  </div>
  <slot />
</x-tabs>

<script>
  class WCTabs extends HTMLElement {
    /**
     * This code defines several static constants and properties for the `WCTabs` class.
     *
     * - `ARIA`: Defines constants for ARIA attributes used in the tabs component, such as `aria-selected`, `aria-controls`, and `aria-orientation`.
     * - `ATTRIBUTES`: Defines constants for custom data attributes used in the tabs component, such as `data-default-active`, `data-tab`, `data-icon`, `data-alt-text`, `data-button-class`, and `data-panel-class`.
     * - `ROLES`: Defines constants for ARIA roles used in the tabs component, such as `tab`, `tablist`, `tabpanel`, and their corresponding selector strings.
     * - `DEFAULT_STYLES`: Defines default CSS styles for the tab buttons and tab panels.
     * - `tabList`: Holds a reference to the tab list element.
     * - `panels`: Holds an array of tab panel elements.
     * - `tabFocus`: Keeps track of the currently focused tab.
     * - `uniqueId`: Holds a unique identifier for the tabs component.
     * - `defaultActiveTab`: Stores the default active tab index.
     */
    static readonly ARIA = {
      SELECTED: "aria-selected",
      CONTROLS: "aria-controls",
      ORIENTATION: "aria-orientation",
      LABELLEDBY: "aria-labelledby",
    } as const;
    static readonly ATTRIBUTES = {
      DEFAULT_ACTIVE: "data-default-active",
      DATA_TAB: "data-tab",
      DATA_ICON: "data-icon",
      DATA_ALT_TEXT: "data-alt-text",
      DATA_BUTTON_CLASS: "data-button-class",
      DATA_PANEL_CLASS: "data-panel-class",
    };
    static readonly ROLES = {
      TAB: "tab",
      TABLIST: "tablist",
      TABPANEL: "tabpanel",
      ROLE_TAB: "[role='tab']",
      ROLE_TABLIST: "[role='tablist']",
      ROLE_TABPANEL: "[role='tabpanel']",
    } as const;
    static readonly DEFAULT_STYLES = {
      tabButton:
        "flex w-full cursor-pointer flex-row items-center justify-center space-x-3 rounded-lg px-2 py-3 text-sm outline-offset-4 outline-black hover:bg-gray-200 focus:outline-4 aria-selected:bg-gradient-to-l aria-selected:from-purple-500 aria-selected:via-purple-800 aria-selected:to-purple-900 aria-selected:text-white md:px-6 md:text-base dark:outline-white dark:hover:bg-zinc-800",
      tabPanel:
        "w-full rounded-xl border border-gray-400 bg-gray-50 p-3 text-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200",
    };
    private tabList: HTMLElement;
    private panels: HTMLElement[] = [];
    private tabFocus = 0;
    private uniqueId: string;
    private defaultActiveTab = "0";
    private tabClickHandlers: Array<(e: Event) => void> = [];
    private tabs: NodeListOf<HTMLElement> | null = null;
    /**
     * The constructor for the `WCTabs` class, which is responsible for initializing the tabs component.
     *
     * This method performs the following tasks:
     * - Generates a unique identifier for the tabs component using the `generateUniqueId()` method.
     * - Retrieves the tab list element from the component, or creates a new one if it doesn't exist.
     * - Sets the `aria-orientation` attribute of the tab list element to either "vertical" or "horizontal" based on the current value.
     */
    constructor() {
      super();
      this.uniqueId = this.generateUniqueId();
      this.tabList =
        this.querySelector(WCTabs.ROLES.ROLE_TABLIST) ||
        this.appendChild(document.createElement("div")); // This is only a failsafe to prevent unhandled errors. Please ensure that the tablist element is present in the component before using the WCTabs component or a UI message is displayed to the user.
      if (!this.tabList) {
        console.error("No tablist found");
        return;
      }
      // Making sure that the aria-orientation is always set to either horizontal or vertical
      this.tabList.getAttribute(WCTabs.ARIA.ORIENTATION) === "vertical"
        ? this.tabList.setAttribute(WCTabs.ARIA.ORIENTATION, "vertical")
        : this.tabList.setAttribute(WCTabs.ARIA.ORIENTATION, "horizontal");
    }

    /**
     * The `connectedCallback()` method is called when the custom element is inserted into the DOM. It is responsible for initializing the tabs component and attaching a keydown event listener to the tab list.
     *
     * This method performs the following tasks:
     * - Calls the `initializeTabs()` method to set up the tabs and panels.
     * - Attaches a `keydown` event listener to the tab list element, which calls the `handleKeyDown()` method to handle keyboard navigation.
     *
     * If any errors occur during the initialization or event listener attachment, they are logged to the console. In a real scenario you would want to handle these errors in a more robust way.
     */
    connectedCallback() {
      try {
        this.initializeTabs();
      } catch (error) {
        console.error("Failed to initialize tabs:", error);
      }
      try {
        this.tabList.addEventListener("keydown", (e: KeyboardEvent) =>
          this.handleKeyDown(e),
        );
      } catch (error) {
        console.error("Failed to attach keydown event:", error);
      }
      try {
        this.tabs = this.tabList.querySelectorAll(
          WCTabs.ROLES.ROLE_TAB,
        ) as NodeListOf<HTMLElement>;
      } catch (error) {
        console.error("Failed to query tabs:", error);
      }
    }
    /**
     * Applies content styling based on the orientation of the tab list.
     *
     * This method checks the `aria-orientation` attribute of the tab list element and applies appropriate CSS classes to the component and tab list element. If the orientation is "vertical", the component is given a flex-col layout with a gap on the x-axis, and the tab list is given a flex-col layout with a gap on the y-axis. If the orientation is "horizontal", no additional styling is applied.
     */
    contentStyler() {
      const tabOrientation: "horizontal" | "vertical" =
        (this.tabList.getAttribute(WCTabs.ARIA.ORIENTATION) as
          | "horizontal"
          | "vertical") ?? "horizontal";

      if (tabOrientation === "vertical") {
        this.classList.add("flex-col", "md:flex-row", "gap-x-4", "md:gap-y-0");
        this.tabList.classList.remove("w-full");
        this.tabList.classList.add(
          "md:flex-col",
          "gap-y-4",
          "h-full",
          "md:gap-x-0",
        );
      }
    }
    /**
     * Generates a unique identifier string.
     *
     * This function generates a unique identifier string by combining a timestamp and a random number. The timestamp is the last 6 digits of the current timestamp, and the random number is a 4-digit number.
     *
     * @returns {string} A unique identifier string.
     */
    generateUniqueId = (): string => {
      const timestamp = Date.now().toString().slice(-6);
      const randomNum = Math.floor(Math.random() * 10000)
        .toString()
        .padStart(4, "0");

      return timestamp + randomNum;
    };

    /**
     * Initializes the tabs component by setting up the tabs and panels.
     *
     * This method performs the following tasks:
     * - Filters the children of the component to include only those that are HTML elements and have the `data-tab` attribute.
     * - Ensures that the `data-default-active` attribute is set to a valid value. If the value is not a number or exceeds the number of children, it defaults to "0".
     * - Sets the `defaultActiveTab` property to the value of the `data-default-active` attribute.
     * - Calls the `contentStyler` method to apply content styling based on the orientation of the tab list.
     * - Iterates over the filtered children and calls the `createChildTabs` method to create the tabs and panels.
     *
     *
     */
    initializeTabs() {
      const children = Array.from(this.children).filter(
        (child): child is HTMLElement =>
          child instanceof HTMLElement &&
          child.hasAttribute(WCTabs.ATTRIBUTES.DATA_TAB),
      );
      const abandonedChildren = Array.from(this.children).filter(
        (child): child is HTMLElement =>
          child instanceof HTMLElement &&
          !child.hasAttribute(WCTabs.ATTRIBUTES.DATA_TAB) &&
          child.getAttribute("role") !== WCTabs.ROLES.TABLIST,
      );
      if (abandonedChildren.length > 0) {
        abandonedChildren.forEach((abandonedChild) => {
          console.warn(
            `Removing child without 'data-tab' or role="tablist" attribute:`,
            abandonedChild,
          );
          abandonedChild.remove();
        });
      }
      if (children.length === 0) {
        console.error(
          "No tabs found. Ensure each tab has a 'data-tab' attribute.",
        );

        return;
      }

      // Next two lines are to ensure that even if random values are passed as props to the component, it will still function with default behaviour

      const defaultActiveTabValue =
        this.getAttribute(WCTabs.ATTRIBUTES.DEFAULT_ACTIVE) ?? "0";
      if (
        isNaN(parseInt(defaultActiveTabValue, 10)) ||
        parseInt(defaultActiveTabValue, 10) > children.length
      ) {
        this.setAttribute(WCTabs.ATTRIBUTES.DEFAULT_ACTIVE, "0");
      }
      this.defaultActiveTab = this.getAttribute(
        WCTabs.ATTRIBUTES.DEFAULT_ACTIVE,
      ) as string;
      this.contentStyler();
      children.forEach((child, index) => {
        this.createChildTabs(child, index);
      });
    }
    /**
     * Creates a tab and its corresponding panel for a given child element.
     *
     * This method performs the following tasks:
     *
     * - Retrieves the tab name from the `data-tab` attribute of the child element. If the attribute is not present, the child element is removed.
     * - Retrieves optional attributes such as `data-icon`, `data-alt-text`, `data-button-class`, and `data-panel-class` from the child element.
     * - Creates a unique identifier for the tab and panel.
     * - Creates a button element for the tab, sets its attributes, and appends it to the tab list.
     * - Creates a section element for the panel, sets its attributes, and appends it to the component.
     * - Adds an event listener to the tab button to handle tab clicks.
     *
     * @param {Element} child - The child element for which to create a tab and panel.
     * @param {number} index - The index of the child element.
     */
    createChildTabs(child: Element, index: number) {
      const tabName: string | null = child.getAttribute(
        WCTabs.ATTRIBUTES.DATA_TAB,
      );
      if (!tabName) {
        child.remove();
        return;
      }
      const tabIcon: string | null = child.getAttribute(
        WCTabs.ATTRIBUTES.DATA_ICON,
      );
      const tabAltText: string =
        child.getAttribute(WCTabs.ATTRIBUTES.DATA_ALT_TEXT) ?? tabName;
      let buttonClass: string =
        child.getAttribute(WCTabs.ATTRIBUTES.DATA_BUTTON_CLASS) ||
        WCTabs.DEFAULT_STYLES.tabButton;
      let panelClass: string =
        child.getAttribute(WCTabs.ATTRIBUTES.DATA_PANEL_CLASS) ||
        WCTabs.DEFAULT_STYLES.tabPanel;
      buttonClass = this.normalizeSpaces(buttonClass);
      panelClass = this.normalizeSpaces(panelClass);
      const uniqueId = `${this.uniqueId}-${index + 1}`;

      const tabButton = document.createElement("button");
      tabButton.setAttribute("role", WCTabs.ROLES.TAB);
      tabButton.setAttribute(
        WCTabs.ARIA.CONTROLS,
        `${uniqueId}-${index + 1}-panel`,
      );
      tabButton.id = `${uniqueId}-${index + 1}-tab`;
      tabButton.classList.add(...buttonClass.split(" "));
      tabButton.innerHTML = tabIcon
        ? `<img src="${tabIcon}" alt="${tabAltText} icon" /> <span>${tabName}</span>`
        : `<span>${tabName}</span>`;
      tabButton.setAttribute(
        WCTabs.ARIA.SELECTED,
        index.toString() === this.defaultActiveTab ? "true" : "false",
      );
      if (index.toString() === this.defaultActiveTab) {
        this.tabFocus = index;
      }
      tabButton.setAttribute(
        "tabindex",
        index.toString() === this.defaultActiveTab ? "0" : "-1",
      );

      this.tabList.appendChild(tabButton);

      const panel = document.createElement("section");
      panel.setAttribute("role", WCTabs.ROLES.TABPANEL);
      panel.setAttribute(
        WCTabs.ARIA.LABELLEDBY,
        `${uniqueId}-${index + 1}-tab`,
      );
      panel.id = `${uniqueId}-${index + 1}-panel`;

      panel.classList.add(...panelClass.split(" "));

      panel.classList.toggle(
        "hidden",
        index.toString() !== this.defaultActiveTab,
      );
      panel.appendChild(child.cloneNode(true)); // Remove the original content to avoid duplication

      child.remove();

      this.appendChild(panel);
      this.panels.push(panel);

      const clickHandler = this.handleTabClick(index);
      this.tabClickHandlers.push(clickHandler);
      tabButton.addEventListener("click", clickHandler);
    }
    /**
     * Normalizes the spaces in the given string by trimming leading/trailing spaces and
     * replacing consecutive spaces with a single space.
     *
     * @param str - The input string to normalize.
     * @returns The normalized string.
     */
    normalizeSpaces(str: string) {
      return str.trim().replace(/\s\s+/g, " ");
    }
    /**
     * Returns an event handler function for handling tab clicks.
     *
     * This method performs the following tasks:
     * - Prevents the default action of the event.
     * - Calls the `setActiveTab` method to activate the tab at the specified index.
     *
     * @param {number} index - The index of the tab to activate.
     * @returns {(e: Event) => void} An event handler function for handling tab clicks.
     */

    handleTabClick(index: number): (e: Event) => void {
      return (e: Event) => {
        e.preventDefault();
        this.setActiveTab(index);
      };
    }

    /**
     * Sets the active tab and updates the corresponding panel visibility.
     *
     * This method performs the following tasks:
     * - Iterates over all tabs and updates the `aria-selected` and `tabindex` attributes based on the specified index.
     * - Iterates over all panels and toggles the `hidden` class based on the specified index.
     *
     * @param {number} index - The index of the tab to activate.
     */

    setActiveTab(index: number) {
      this.tabs?.forEach((tab, tabIndex) => {
        tab.setAttribute(
          WCTabs.ARIA.SELECTED,
          tabIndex === index ? "true" : "false",
        );
        tab.setAttribute("tabindex", tabIndex === index ? "0" : "-1");
      });

      this.panels.forEach((panel, panelIndex) => {
        panel.classList.toggle("hidden", panelIndex !== index);
      });
    }
    /**
     * Handles keyboard navigation for the tabs component.
     *
     * This method performs the following tasks:
     * - Retrieves all tab elements within the tab list.
     * - Checks the orientation of the tab list (horizontal or vertical) and handles arrow key navigation accordingly.
     * - Updates the `tabindex` attribute and focuses the appropriate tab based on the arrow key pressed.
     * - Handles the "Tab" key to ensure proper focus management within the tabs.
     *
     * @param {KeyboardEvent} e - The keyboard event object.
     */

    handleKeyDown(e: KeyboardEvent): void {
      const tabs = this.tabs;
      if (!tabs) return;

      if (e.key && tabs.length) {
        if (
          this.tabList.getAttribute(WCTabs.ARIA.ORIENTATION) === "horizontal"
        ) {
          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
            tabs[this.tabFocus]?.setAttribute("tabindex", "-1");
            if (e.key === "ArrowRight") {
              this.tabFocus++;
              if (this.tabFocus >= tabs.length) {
                this.tabFocus = 0;
              }
            } else if (e.key === "ArrowLeft") {
              this.tabFocus--;
              if (this.tabFocus < 0) {
                this.tabFocus = tabs.length - 1;
              }
            }
            tabs[this.tabFocus].setAttribute("tabindex", "0");
            tabs[this.tabFocus].focus();
          }
        }
        if (this.tabList.getAttribute(WCTabs.ARIA.ORIENTATION) === "vertical") {
          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
            e.preventDefault();
            tabs[this.tabFocus]?.setAttribute("tabindex", "-1");
            if (e.key === "ArrowDown") {
              this.tabFocus++;
              if (this.tabFocus >= tabs.length) {
                this.tabFocus = 0;
              }
            } else if (e.key === "ArrowUp") {
              this.tabFocus--;
              if (this.tabFocus < 0) {
                this.tabFocus = tabs.length - 1;
              }
            }
            tabs[this.tabFocus].setAttribute("tabindex", "0");
            tabs[this.tabFocus].focus();
          }
        }
        if (e.key === "Tab") {
          tabs.forEach((tab, index) => {
            tab.blur();
            if (tab.getAttribute(WCTabs.ARIA.SELECTED) === "true") {
              tab.setAttribute("tabindex", "0");
              this.tabFocus = index;
            } else {
              tab.setAttribute("tabindex", "-1");
            }
          });
        }
      }
    }
    /**
     * Called when the custom element is disconnected from the DOM.
     *
     * This method performs the following tasks:
     * - Removes the keydown event listener from the tab list.
     * - Iterates over all tabs and removes the click event listener from each tab.
     */

    disconnectedCallback() {
      this.tabList.removeEventListener("keydown", this.handleKeyDown);
      const tabs = this.tabs;
      if (!tabs) return;
      tabs.forEach((tab, index) => {
        tab.removeEventListener("click", this.tabClickHandlers[index]);
      });
      this.tabClickHandlers = [];
    }
  }

  customElements.define("x-tabs", WCTabs);
</script>

The Tabs above are created using the Web Components API along with Astrojs. It follows the standard patterns for tabs as defined by the WAI-ARIA APG which is available here . This specifically follows the Tabs with Manual Activation pattern.

Note: The tabs are responsive in nature, that means the vertical tabs will become horizontal below the breakpoint md . The styling used above is a showcase of the component’s options and not really recommended for direct use.

Usage

To use the Tabs component in your Astro project, follow these steps below after copying the code into a component file:

Import the Tab component into your Astro page.
Render the Tab component in your Astro page and pass the tabs as a slot. (This creates a lot of flexibility in the implementation, but remember that it can create errors if you don’t follow the correct implementation)

Example implementation is given below:

---
import Tabs from './WCTabs.astro'; // Refer the correct location of the component in your project

---

<WCTabs
  defaultActive="0"
  orientation="vertical">
  <div
    data-tab="Overview"
    data-button-class="cursor-pointer w-full px-auto md:px-6 py-3 text-sm md:text-base rounded-lg flex justify-center flex-row items-center space-x-3 hover:bg-gray-200 dark:hover:bg-zinc-800 dark:aria-selected:hover:bg-indigo-800 aria-selected:bg-indigo-800 aria-selected:text-white focus:outline-4 outline-offset-4 outline-black dark:outline-white"
    data-icon="/tick.svg"
    data-alt-text="Pen"
    data-panel-class="p-3 bg-indigo-100 w-full rounded-xl border-gray-300 dark:bg-indigo-950 border dark:border-zinc-800 text-zinc-800 dark:text-zinc-200 overflow-x-auto">
    <h2>Product Overview</h2>
    <p>This is a fantastic product that solves all your problems.</p>
  </div>
  <div
    data-tab="Data"
    data-button-class="cursor-pointer w-full px-auto md:px-6 py-3 text-sm md:text-base rounded-lg flex justify-center flex-row items-center space-x-3 hover:bg-gray-200 dark:hover:bg-zinc-800 dark:aria-selected:hover:bg-cyan-800 aria-selected:bg-cyan-800 aria-selected:text-white focus:outline-4 outline-offset-4 outline-black dark:outline-white"
    data-panel-class="p-3 bg-cyan-100 w-full rounded-xl border-gray-300 dark:bg-cyan-950 border dark:border-zinc-800 text-zinc-800 dark:text-zinc-200 overflow-x-auto">
    <h2>Data Overview</h2>
    <p>Wow</p>
  </div>

  <ul data-tab="Comments">
    <li>Alice: Great product, would buy again!</li>
    <li>Bob: Fast shipping, good quality.</li>
    <li>Carol: Exactly what I needed.</li>
  </ul>
</WCTabs>

Note: As you may have noticed the tabs above are sent as a slot instead of a prop. While this adds a lot of flexibility to the implementation, it also means that there are added restrictions for the usage of the component. Based on the use case, this may not be the best approach for your page.

Data Attributes

The data attributes for creating tabs should be applied to the root element for which the tabpanel will be created. The root elements must be direct children of the component which can be any HTMLElement, passed via the slot. This design ensures that the component interacts only with the panel elements themselves and does not traverse further into their descendants.

Attribute	Type	Description
`data-tabs` (required)	`string`	The unique identifier which names the tab button.
`data-default-active`	`string`	The index of the default active tab. Index starts at 0. If an invalid entry is sent, it will default to 0
`data-button-class`	`string`	Tailwind classes for the tab buttons in case you want to override base style defined in the class for a particular tab.
`data-panel-class`	`string`	Tailwind classes for the panel in case you want to override base style defined in the class for a particular tab.
`data-icon`	`string`	Has to be in the public folder for it to be available at runtime. If not used, it will show no icon.
`data-alt-text`	`string`	The alternative text to be displayed for the icon. Will not have any impact if `data-icon` is not mentioned.

Important Note: Remember that if you do not include data-tabs to all direct children of the component with a string value, it may cause unexpected behaviour. If any direct child is present without data-tabs attribute, it will be removed from the DOM as long as it does not have the role="tablist" attribute. Note that the panel is a separate section element which wraps the content of the element with the data-tab attribute.

data-* attributes are used to exchange information between the DOM and the component. For more information about data-* attributes, you can refer to the MDN web docs

Component Props

The Tabs component accepts the following props

defaultActive: The index of the default active tab. Index starts at 0. If an invalid entry(not a number or greater than the number of tabs) is sent, it will default to 0.
orientation: The orientation of the tabs. Possible values are horizontal and vertical. horizontal by default. Any invalid entry will default it to horizontal. This also sets the aria-orientation attribute of the tab list element to either horizontal or vertical.

Style Customization

For individual styling you can pass tailwind classes using the data-attributes mentioned in the table above. For changing the base style of the component, in the astro component file, search for the following lines :

// ... All the code above this


    static readonly DEFAULT_STYLES = {
      tabButton:
        "cursor-pointer w-full px-auto md:px-6 py-3 text-sm md:text-base rounded-lg flex justify-center flex-row items-center space-x-3 hover:bg-gray-200 dark:hover:bg-zinc-800 aria-selected:bg-gradient-to-l aria-selected:from-purple-500 aria-selected:via-purple-800 aria-selected:to-purple-900 aria-selected:text-white focus:outline-4 outline-offset-4 outline-black dark:outline-white",
      tabPanel:
        "p-3 bg-gray-50 w-full rounded-xl border-gray-300 dark:bg-zinc-950 border dark:border-zinc-800 text-zinc-800 dark:text-zinc-200 overflow-x-auto",
    };

// All the code below this

Changing the styles will reflect on all your tabs. Remember that we are coupling aria-selected with the tabs selection indicator, so don’t forget to preserve the aria-selected logic so that the tabs function as expected.

Please keep in mind that the Tabs component is provided as-is and may require further testing and customization to fit your specific use case. Also it removes the original panel node and adds a duplicate panel node with the same id and properties.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Normal Tabs	Yes	Yes	Yes	Yes	Yes
Normal Tabs With Icons	Yes	Yes	Yes	Yes	Yes
Gradient Tabs With Icons	Yes	Yes	Yes	Yes	Yes
Astrojs Web Component Tabs	Yes	Yes	Yes	Yes	Yes

ravixUI follows the tabs pattern from WAI-ARIA APG which is available here . This specifically follows the Tabs with Manual Activation pattern.

Keyboard Interaction

Keyboard Navigation	Description
`Arrow Up/Down` (Only for AstroJS Webcomponent)	If orientation is vertical, moves focus to next tab. Has no effect if the tabs are horizontal in orientation.(Available only in the AstroJS web component)
`Arrow Left/Right`	If the tabs are horizontal, moves focus to next tab. Has no effect if the tabs are vertical in orientation
`Enter` or `Space`	Shows the tab panel associated with the currently focused tab while hiding other tab panels
`Tab` or `Shift` + `Tab`	Moves the focus out of the tablist and onto the next/previous focusable element in the DOM.