风格目录/固定侧边栏布局

固定侧边栏布局

Fixed Sidebar

固定位置的侧边导航栏与可滚动主内容区的应用布局，适合后台管理、文档站点、仪表盘、SaaS 应用。

侧边栏后台管理导航仪表盘应用

查看完整 Showcase →

配色方案

Primary

#1e293b

Secondary

#f8fafc

Accent 1

#3b82f6

Accent 2

#10b981

Accent 3

#f59e0b

Accent 4

#ef4444

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

开始生成

尝试："用固定侧边栏布局风格生成一个着陆页"

设计哲学

Fixed Sidebar（固定侧边栏布局）是应用型界面的经典布局，提供持久可见的导航同时最大化内容展示空间。

核心理念： - 导航常驻：重要入口始终可及 - 内容优先：主区域最大化利用 - 层级清晰：侧边栏体现信息架构 - 响应适配：小屏幕优雅收起

必须做 / Do's

+侧边栏使用 fixed 或 sticky 定位
+主内容区设置左边距 ml-64 或 pl-64
+移动端侧边栏可收起为抽屉或汉堡菜单
+提供展开/收起侧边栏的控制
+侧边栏宽度统一 w-64 (256px) 或 w-72 (288px)
+当前页面在侧边栏中高亮显示
+侧边栏可以包含品牌 logo、导航、用户信息

禁止做 / Don'ts

-禁止侧边栏过宽影响主内容区
-禁止移动端仍保持展开侧边栏
-禁止忽略当前页面状态指示
-禁止导航层级过深难以操作
-禁止侧边栏内容溢出无滚动

组件模板

组件预览

侧边栏按钮

侧边栏中的操作按钮

tsx

<button className="
  w-full
  flex items-center gap-3
  px-4 py-3
  text-left
  text-zinc-600
  rounded-lg
  hover:bg-zinc-100
  hover:text-zinc-900
  transition-colors
">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
  </svg>
  <span>New Item</span>
</button>

全局样式

Global CSS

css

/* Fixed Sidebar Global Styles */

/* Sidebar base */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 16rem; /* 256px */
  height: 100vh;
  background: white;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform 0.3s ease;
}

/* Main content offset */
.main-content {
  margin-left: 16rem;
  min-height: 100vh;
}

/* Mobile sidebar hidden by default */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Collapsed sidebar variant */
.sidebar-collapsed {
  width: 4rem; /* 64px */
}

.sidebar-collapsed .sidebar-label {
  display: none;
}

.sidebar-collapsed + .main-content {
  margin-left: 4rem;
}

/* Navigation item active state */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #64748b;
  transition: all 0.2s;
}

.nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.nav-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成固定侧边栏布局风格的界面。

管理后台

完整的后台管理布局

Create an admin dashboard with fixed sidebar:
1. Fixed sidebar with logo, search, navigation, user
2. Navigation groups: Dashboard, Content, Users, Settings
3. Active page highlighted in nav
4. Main area with header and content grid
5. Mobile: hamburger menu, slide-out sidebar
6. Collapsible sidebar option (icons only)
7. User dropdown at bottom of sidebar
Professional look with blue accent color

文档站点

技术文档的侧边导航布局

Create a documentation site with fixed sidebar:
1. Sidebar with doc sections (Getting Started, API, Examples)
2. Nested navigation with accordion expand
3. Search at top of sidebar
4. Main content area with article
5. Right sidebar with table of contents (optional)
6. Previous/Next article navigation at bottom
7. Mobile: slide-out sidebar menu
Clean minimal design focused on readability

SaaS 应用

SaaS 产品的应用框架

Create a SaaS application shell with fixed sidebar:
1. Sidebar with workspace switcher at top
2. Main nav: Home, Projects, Team, Reports
3. Secondary nav at bottom: Settings, Help
4. Notification badge on nav item
5. Main content with toolbar and data table
6. Mobile: slide-out navigation
7. Collapsible sidebar with keyboard shortcut hint
Modern SaaS aesthetic with subtle shadows

提示：复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

固定侧边栏布局是一种布局模式，可以与以下视觉风格搭配使用。

Corporate

专业企业风格

企业简洁风

Corporate Clean

Soft UI

温和友好的设计

柔和界面风

Soft UI

Dark

深色界面设计

暗黑模式

Dark Mode

Minimal

Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Neumorphism

柔和立体的界面

新拟物派

Neumorphism

Style Pack

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照固定侧边栏布局风格生成代码。

You are a frontend expert specializing in Fixed Sidebar layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make sidebar too wide (max 280px)
- Do NOT keep sidebar expanded on mobile
- Do NOT forget current page indicator
- Do NOT create overly deep navigation
- Do NOT ignore sidebar overflow scroll

## Must Follow

- Sidebar: fixed top-0 left-0 w-64 h-screen
- Main content: ml-64 (matches sidebar width)
- Mobile: sidebar hidden, hamburger menu trigger
- Active state: highlight current page
- Overflow: sidebar nav scrollable if needed

## Structure

Sidebar (top to bottom):
1. Logo/Brand area
2. Search (optional)
3. Main navigation (scrollable)
4. Secondary nav or settings
5. User profile/account

Main content:
- Left margin matches sidebar width
- Own scrolling context
- Header area for page title
- Content area below

## Responsive

Desktop (1024px+):
- Full sidebar visible
- Main content with left margin

Tablet/Mobile (< 1024px):
- Sidebar as off-canvas drawer
- Hamburger menu button
- Overlay when sidebar open
- Main content full width

## Navigation

- Group related items
- Use icons + labels
- Highlight active item
- Support nested items (accordion)
- Tooltips when collapsed

## Self-Check

After generating code, verify:
1. Sidebar is fixed position
2. Main content has correct margin
3. Mobile has hamburger menu
4. Current page is highlighted
5. Sidebar scrolls if content overflows

组件预览

侧边栏按钮

侧边栏中的操作按钮

tsx

<button className="
  w-full
  flex items-center gap-3
  px-4 py-3
  text-left
  text-zinc-600
  rounded-lg
  hover:bg-zinc-100
  hover:text-zinc-900
  transition-colors
">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
  </svg>
  <span>New Item</span>
</button>

Global CSS

css

/* Fixed Sidebar Global Styles */

/* Sidebar base */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 16rem; /* 256px */
  height: 100vh;
  background: white;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform 0.3s ease;
}

/* Main content offset */
.main-content {
  margin-left: 16rem;
  min-height: 100vh;
}

/* Mobile sidebar hidden by default */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Collapsed sidebar variant */
.sidebar-collapsed {
  width: 4rem; /* 64px */
}

.sidebar-collapsed .sidebar-label {
  display: none;
}

.sidebar-collapsed + .main-content {
  margin-left: 4rem;
}

/* Navigation item active state */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #64748b;
  transition: all 0.2s;
}

.nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.nav-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成固定侧边栏布局风格的界面。

管理后台

完整的后台管理布局

Create an admin dashboard with fixed sidebar:
1. Fixed sidebar with logo, search, navigation, user
2. Navigation groups: Dashboard, Content, Users, Settings
3. Active page highlighted in nav
4. Main area with header and content grid
5. Mobile: hamburger menu, slide-out sidebar
6. Collapsible sidebar option (icons only)
7. User dropdown at bottom of sidebar
Professional look with blue accent color

文档站点

技术文档的侧边导航布局

Create a documentation site with fixed sidebar:
1. Sidebar with doc sections (Getting Started, API, Examples)
2. Nested navigation with accordion expand
3. Search at top of sidebar
4. Main content area with article
5. Right sidebar with table of contents (optional)
6. Previous/Next article navigation at bottom
7. Mobile: slide-out sidebar menu
Clean minimal design focused on readability

SaaS 应用

SaaS 产品的应用框架

Create a SaaS application shell with fixed sidebar:
1. Sidebar with workspace switcher at top
2. Main nav: Home, Projects, Team, Reports
3. Secondary nav at bottom: Settings, Help
4. Notification badge on nav item
5. Main content with toolbar and data table
6. Mobile: slide-out navigation
7. Collapsible sidebar with keyboard shortcut hint
Modern SaaS aesthetic with subtle shadows

提示：复制时会自动附带该风格的设计规范

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照固定侧边栏布局风格生成代码。

You are a frontend expert specializing in Fixed Sidebar layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make sidebar too wide (max 280px)
- Do NOT keep sidebar expanded on mobile
- Do NOT forget current page indicator
- Do NOT create overly deep navigation
- Do NOT ignore sidebar overflow scroll

## Must Follow

- Sidebar: fixed top-0 left-0 w-64 h-screen
- Main content: ml-64 (matches sidebar width)
- Mobile: sidebar hidden, hamburger menu trigger
- Active state: highlight current page
- Overflow: sidebar nav scrollable if needed

## Structure

Sidebar (top to bottom):
1. Logo/Brand area
2. Search (optional)
3. Main navigation (scrollable)
4. Secondary nav or settings
5. User profile/account

Main content:
- Left margin matches sidebar width
- Own scrolling context
- Header area for page title
- Content area below

## Responsive

Desktop (1024px+):
- Full sidebar visible
- Main content with left margin

Tablet/Mobile (< 1024px):
- Sidebar as off-canvas drawer
- Hamburger menu button
- Overlay when sidebar open
- Main content full width

## Navigation

- Group related items
- Use icons + labels
- Highlight active item
- Support nested items (accordion)
- Tooltips when collapsed

## Self-Check

After generating code, verify:
1. Sidebar is fixed position
2. Main content has correct margin
3. Mobile has hamburger menu
4. Current page is highlighted
5. Sidebar scrolls if content overflows