---
title: "Tabs"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Tabs with boxed, bordered, lifted, and underline variants. Accessible panel switching for organized content sections and navigation."
url: https://frutjam.com/tr/components/tabs
---

# Tabs Component

Sekme bileşenleri, içeriği, kullanıcıların sayfadan ayrılmadan geçiş yapabileceği ayrı bölümler halinde düzenler. Anlamsal HTML ve radyo giriş kalıplarıyla oluşturulan sekmeler, ilgili bilgilerin gruplandırılması için sezgisel gezinme sağlar. Frutjam sekme sistemi birden fazla boyutu, stili ve düzen yönünü (yalnızca CSS veya JavaScript kontrollü) destekler; bu da onu kontrol panelleri, belgeler ve sekmeli arayüzler için ideal kılar.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf          | Tip         | Tanım                                                               |
| -------------- | ----------- | ------------------------------------------------------------------- |
| tabs           | Temel       | Bir grup sekme girişi ve içerik paneli için kapsayıcı               |
| tab            | Değiştirici | Bireysel sekmeli radyo girişi                                       |
| tab-content    | Değiştirici | Bir sekmeyle ilişkili içerik paneli                                 |
| tab-active     | Değiştirici | Bir sekmede etkin/seçili durumu zorlar (JS kontrollü sekmeler için) |
| tab-disabled   | Değiştirici | Bir sekme için devre dışı bırakılmış görünüm                        |
| tabs-underline | Stil        | Altı çizili gösterge stili                                          |
| tabs-lifted    | Stil        | Kart benzeri kaldırılmış sekme stili                                |
| tabs-box       | Stil        | Kutulu hap tarzı sekmeler                                           |
| tabs-vertical  | Değiştirici | Sol taraftaki sütunda sekmeler bulunan dikey sekme düzeni           |
| tabs-end       | Değiştirici | Sekme satırını sona hizalar (LTR'de sağda)                          |
| tabs-bottom    | Değiştirici | Sekmeleri içerik panelinin altına yerleştirir                       |
| tabs-xs        | Boyut       | Ekstra küçük sekme dolgusu                                          |
| tabs-sm        | Boyut       | Küçük sekme dolgusu                                                 |
| tabs-md        | Boyut       | Orta sekme dolgusu (varsayılan)                                     |
| tabs-lg        | Boyut       | Büyük sekme dolgusu                                                 |
| tabs-xl        | Boyut       | Ekstra büyük sekme dolgusu                                          |

## Temel Kullanım

Varsayılan sekmeler, radyo girişleriyle birlikte basit, etkin durumda altı çizili bir stil kullanır. Her `sekme` girişi, hemen ardından gelen bir `sekme içeriği` paneliyle eşleştirilir.

```html
<div class="tabs">
  <input type="radio" name="tabs-basic" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">
    <p>Overview content: a high-level summary of features, metrics, or status. This panel is visible by default.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Details">
  <div class="tab-content pt-4">
    <p>Details content: in-depth information such as configuration options, data breakdown, or extended documentation.</p>
  </div>

  <input type="radio" name="tabs-basic" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">
    <p>Activity content: a timeline, event log, or recent changes relevant to this section.</p>
  </div>
</div>
```

## Sekme Stilleri

Sekme şeridinin görsel stilini değiştirmek için `tabs-underline`, `tabs-box` veya `tabs-lifted`'i kullanın.

```html
<div class="tabs tabs-underline">
  <input type="radio" name="style-underline" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Underline style — a colored bottom border marks the active tab against a full-width separator line.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-underline" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-box">
  <input type="radio" name="style-box" class="tab" aria-label="Overview" checked>
  <div class="tab-content pt-4">Box style — the active tab gets a raised background inside a tinted pill container.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Details">
  <div class="tab-content pt-4">Details panel.</div>
  <input type="radio" name="style-box" class="tab" aria-label="Activity">
  <div class="tab-content pt-4">Activity panel.</div>
</div>

<div class="tabs tabs-lifted">
  <input type="radio" name="style-lifted" class="tab" aria-label="Overview" checked>
  <div class="tab-content p-4">Lifted style — the active tab appears as a card tab with borders that merge into the content panel below.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Details">
  <div class="tab-content p-4">Details panel.</div>
  <input type="radio" name="style-lifted" class="tab" aria-label="Activity">
  <div class="tab-content p-4">Activity panel.</div>
</div>
```

## Sekme Boyutları

Düzeninizin yoğunluğuna uyacak şekilde sekme dolgusunu `tabs-xs`'den `tabs-xl`'ye ölçeklendirin.

```html
<div class="tabs tabs-underline tabs-xs">
  <input type="radio" name="size-xs" class="tab" aria-label="Extra Small" checked>
  <div class="tab-content pt-3">Extra small tabs</div>
  <input type="radio" name="size-xs" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-sm">
  <input type="radio" name="size-sm" class="tab" aria-label="Small" checked>
  <div class="tab-content pt-3">Small tabs</div>
  <input type="radio" name="size-sm" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-md">
  <input type="radio" name="size-md" class="tab" aria-label="Medium" checked>
  <div class="tab-content pt-3">Medium tabs (default)</div>
  <input type="radio" name="size-md" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-lg">
  <input type="radio" name="size-lg" class="tab" aria-label="Large" checked>
  <div class="tab-content pt-3">Large tabs</div>
  <input type="radio" name="size-lg" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>

<div class="tabs tabs-underline tabs-xl">
  <input type="radio" name="size-xl" class="tab" aria-label="Extra Large" checked>
  <div class="tab-content pt-3">Extra large tabs</div>
  <input type="radio" name="size-xl" class="tab" aria-label="Tab 2">
  <div class="tab-content pt-3">Content</div>
</div>
```

## Düğmeli Sekmeler

Sekmeleri stilize edilmiş düğmeler olarak oluşturmak için `tab` ile `btn`'yi birleştirin. Sekme seçim mantığı korunurken `btn` sınıfı renkleri ve kenarlık yarıçapını devralır.

```html
<div class="tabs gap-2">
  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Home" checked>
  <div class="tab-content pt-4">
    <p>Home — your primary landing panel with quick access to key actions and a summary view.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Profile">
  <div class="tab-content pt-4">
    <p>Profile — manage personal information, preferences, and account details.</p>
  </div>

  <input type="radio" name="btn-tabs" class="tab btn btn-sm" aria-label="Settings">
  <div class="tab-content pt-4">
    <p>Settings — configure notifications, privacy options, and connected integrations.</p>
  </div>
</div>
```

## Devre Dışı Sekmeler

Bir sekmeyle etkileşimi önlemek için `tab-disabled` ve `disabled` özelliğini ekleyin.

```html
<div class="tabs tabs-underline">
  <input type="radio" name="disabled-tabs" class="tab" aria-label="Available" checked>
  <div class="tab-content pt-4">This tab is active and accessible.</div>

  <input type="radio" name="disabled-tabs" class="tab tab-disabled" aria-label="Unavailable" disabled>
  <div class="tab-content pt-4">This content is not reachable.</div>

  <input type="radio" name="disabled-tabs" class="tab" aria-label="Another">
  <div class="tab-content pt-4">Another available tab panel.</div>
</div>
```

## Dikey Sekmeler

`tabs-vertical`, sol taraftaki sütunda sekmeler bulunan ve sağ sütunu dolduran içeriğe sahip bir ızgara düzenine geçer. Sütunların arasına otomatik olarak tam yükseklikte bir ayırıcı çizgi eklenir.

```html
<div class="tabs tabs-vertical">
  <input type="radio" name="vertical" class="tab" aria-label="General" checked>
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">General Settings</h3>
    <p>Manage your display name, language preference, and time zone.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Security">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Security</h3>
    <p>Update your password, enable two-factor authentication, and review active sessions.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Notifications">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Notifications</h3>
    <p>Choose which events trigger email, push, or in-app notifications.</p>
  </div>

  <input type="radio" name="vertical" class="tab" aria-label="Billing">
  <div class="tab-content px-6 py-2">
    <h3 class="font-semibold mb-1">Billing</h3>
    <p>View invoices, update your payment method, and manage your subscription plan.</p>
  </div>
</div>
```

## Alttaki Sekmeler

`tabs-bottom`, içeriğin sekme şeridinin üzerinde görünmesini sağlayacak şekilde düzeni çevirir; mobil stildeki gezinme çubukları veya alt araç çubukları için kullanışlıdır.

```html
<div class="tabs tabs-bottom tabs-underline">
  <input type="radio" name="bottom-tabs" class="tab" aria-label="Feed" checked>
  <div class="tab-content pb-4">
    <p>Feed — latest posts and updates from people you follow.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Explore">
  <div class="tab-content pb-4">
    <p>Explore — discover trending topics, creators, and recommended content.</p>
  </div>

  <input type="radio" name="bottom-tabs" class="tab" aria-label="Saved">
  <div class="tab-content pb-4">
    <p>Saved — articles and posts you bookmarked for later.</p>
  </div>
</div>
```

## Sona Hizalanmış Sekmeler

`tabs-end`, sekme şeridini kabın sağına (ucuna) iter; bu, ikincil gezinme veya eylem menüleri için kullanışlıdır.

```html
<div class="tabs tabs-underline tabs-end">
  <input type="radio" name="end-tabs" class="tab" aria-label="Week" checked>
  <div class="tab-content pt-4">Weekly view — aggregated metrics for the past 7 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Month">
  <div class="tab-content pt-4">Monthly view — trend analysis over the past 30 days.</div>

  <input type="radio" name="end-tabs" class="tab" aria-label="Year">
  <div class="tab-content pt-4">Yearly view — annual summary and year-over-year comparison.</div>
</div>
```

## JavaScript Kontrollü Sekmeler

Radyo dışı modeller için (ör. bağlantı bağlantıları, dinamik içerik), JavaScript'te seçilen sekmeye `tab-active` öğesini ekleyin. Eşleştirilen `tab-content`, `.tab-active + .tab-content` seçici aracılığıyla gösterilir.