跳至主要內容
Frutjam logo Frutjam
v2.2.5
Theme

側邊欄組件

最後更新:

僅 CSS Tailwind CSS 側邊欄，用於側面導覽面板。可折疊，帶有導航項目狀態和部分標題。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

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

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

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

基本用法

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

Main content area

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="flex min-h-90">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Menu</span></li>
      <li><a class="menu-item">Sidebar Item 1</a></li>
      <li><a class="menu-item">Sidebar Item 2</a></li>
      <li><a class="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <p class="para-base">Main content area</p>
  </main>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div className="flex min-h-90">
  <aside className="sidebar w-64">
    <ul className="menu p-4">
      <li className="menu-title"><span>Menu</span></li>
      <li><a className="menu-item">Sidebar Item 1</a></li>
      <li><a className="menu-item">Sidebar Item 2</a></li>
      <li><a className="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main className="flex-1 p-6">
    <p className="para-base">Main content area</p>
  </main>
</div>

側邊欄導航

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

Overview

Page content goes here.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 側邊欄 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP