跳转到主内容
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