---
title: "Sidebar"
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: "Tailwind CSS Sidebar with collapsible panels, icons, and nested menus. Responsive dashboard navigation for admin layouts and multi-section applications."
url: https://frutjam.com/zh-hant/components/sidebar
---

# Sidebar Component

側邊欄組件在固定或可折疊的側面板中組織主要導航和輔助內容。側邊欄採用語義 HTML 構建，可在不佔用主要內容空間的情況下改善導航。 Frutjam 側邊欄系統支援多種佈局、寬度和行為，非常適合管理儀表板、文件網站和複雜應用程式。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級      | 類型 | 描述              |
| ------- | --- | --------------- |
| sidebar | 根據 | 用於導航和輔助內容的固定側面板 |

## 基本用法

在 `aside` 元素上使用 `sidebar` 類別。將其與主要內容一起放置在彈性容器中。

## 側邊欄導航

帶有分組部分和活動狀態樣式的完整導覽側邊欄。

```html
<div class="flex min-h-105">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item menu-item menu-active">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <h2 class="heading-2xl">Overview</h2>
    <p class="para-base mt-2">Page content goes here.</p>
  </main>
</div>
```

## 可折疊側邊欄

對於移動側邊欄或覆蓋側邊欄，請將 `sidebar` 類別與 `抽屜抽屜啟動` 對話方塊組件結合。

```html
<button type="button" class="btn btn-primary btn-sm" onclick="sidebarDrawer.show()">Open Sidebar</button>

<dialog class="drawer drawer-start" id="sidebarDrawer">
  <div class="drawer-content">
    <aside class="sidebar h-full w-64">
      <ul class="menu p-4">
        <li class="menu-title"><span>Dashboard</span></li>
        <li><a class="menu-item">Home</a></li>
        <li><a class="menu-item">Profile</a></li>
        <li><a class="menu-item">Settings</a></li>
        <li><a class="menu-item">Logout</a></li>
      </ul>
    </aside>
  </div>
  <button type="button" class="drawer-backdrop" onclick="sidebarDrawer.close()">Close Sidebar via Backdrop</button>
</dialog>
```