正在加载顶部导航...

顶栏与侧栏范式

参照 Untitled-1.md 的 Apple · Linear · Notion 混合体系，用组件矩阵对照主流产品的导航与 Sidebar；参数可重置为示范默认。可与 Tailwind UI、shadcn/ui、Radix Themes 等开源模式对照落地。

顶部导航 · 多风格切换

Apple 极简、Linear 深色工具栏、Notion 文档顶栏、SaaS 居中、玻璃浮动、Material 标签线；可调栏高与强调色。

交互调节

实时预览
Nexus
参数
栏高 52px
强调色
当前范式 · 关键词
深色工具栏border-white/8Issues / Cycles图标工具区高密度 SaaS

深色底 + 低对比描边；中间为产品模块导航（英文 issue 语境），右侧搜索/通知图标——典型 AI 开发者后台顶栏。

开源对照：Tailwind UI Headers · Radix Toolbar · shadcn navigation-menu（预览为自绘示意）。

说明（可复制）

━━━ AI Prompt · 顶栏矩阵 ━━━
Design a responsive app header; pick one reference style:
- Apple-like: minimal, large typography, single primary CTA
- Linear-like: dark chrome, low-contrast border-white/8, dense icon tools
- Notion-like: light doc header, sidebar toggle, muted actions
- SaaS centered nav with logo left/center and primary CTA right
- Floating glass bar with blur and ⌘K search affordance
- Material-like tab indicator with accent underline
Use 8px spacing grid; header height ~52px; one accent color for logo mark or active tab.

━━━ Tailwind 片段（Linear 深色示意） ━━━
className="flex h-[52px] items-center gap-4 border-b border-white/10 bg-[#09090B] px-4 text-sm text-neutral-200"

━━━ 开源对照 ━━━
Tailwind UI Marketing Headers · Radix Toolbar · shadcn navigation-menu — 将范式映射到自家路由与 auth 状态。

Sidebar · 主流结构

图标窄轨、分组列表、仓库双栏、仪表板宽栏、画布上浮抽屉；可调宽栏宽度与品牌色。

交互调节

预览

Workspace

设计系统

参数

当前范式为固定宽或图标轨，宽度滑块用于宽栏/文档栏。

品牌强调
当前范式 · 关键词
52px 图标轨Workspace 二级深色侧栏无文字主导航上下文列表

左侧窄轨只放图标，右侧再展开列表或详情——Linear / Slack 常见的「轨 + 面板」双层导航。

对照落地：React Aria Disclosure · Tailwind UI Sidebar patterns（预览为自绘示意）。

说明（可复制）

━━━ AI Prompt · Sidebar 矩阵 ━━━
Implement app sidebar; choose structure:
- Icon rail + secondary context (Linear-style)
- Grouped page tree with section labels (Notion-style)
- Org/repo switcher + repo nav (GitHub-style)
- Wide branded rail with icons + labels (Dashboard analytics)
- Floating drawer overlay on canvas (AI canvas tools)
Width ~240px for text sidebar; 52px for icon-only rail; WCAG contrast on active row.

━━━ Tailwind 片段（图标轨） ━━━
className="flex w-[52px] flex-col items-center gap-3 border-r border-white/10 bg-[#09090B] py-3"

━━━ 开源对照 ━━━
React Aria Disclosure / Navigation primitives · Tailwind UI Sidebar patterns.