Sidebar Navigation Layout
Build a responsive sidebar layout with CSS Grid, smooth width transition, and proper spacing.
何时使用此配方
Dashboard applications, admin panels, and documentation sites commonly use sidebar navigation. This creates a clean, responsive sidebar that can be toggled on mobile.
步骤
Grid Generator
试用此工具 →Create the sidebar + main layout
Box Shadow Generator
试用此工具 →Add subtle sidebar edge shadow
Easing Generator
试用此工具 →Smooth sidebar toggle animation
常见问题
How do I make the sidebar collapsible?
Toggle the grid-template-columns between '260px 1fr' and '60px 1fr' (icon-only mode). The transition will animate smoothly.
How do I handle the sidebar on mobile?
Use a CSS media query to change to a single column layout, and show the sidebar as an overlay with position: fixed.
相关配方
Complete Button Style
Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.
Hero Section Design
Design a stunning hero section with gradient background, flexbox centering, and entrance animation.
Card Component Style
Build a modern card component with shadow, border radius, hover transform, and smooth transitions.
Glassmorphism Effect
Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.