Skeuomorphic Leather Bento Dashboard
This design marries the timeless elegance of modern skeuomorphism with the structured efficiency of a Bento Grid layout. Rich leather textures and metallic acce…
Dashboard
Collection 20Collection
Application shells built for daily use
Shell layouts that define navigation, workspace hierarchy, and layout density for SaaS apps.
App shells determine how users navigate the product every day. This collection focuses on stable navigation, workspace selectors, and consistent content rails.
Designs favor predictable patterns that reduce cognitive load across complex applications.
- Navigation patterns that scale to multi-module apps.
- Workspace selectors that reduce context switching.
- Consistent content rails for predictable scanning.
Read the related playbook
Dive deeper into the strategy behind this collection.
App Shell Layouts Collection
This collection showcases application shell layouts optimized for SaaS products. Each design applies navigation hierarchy principles: primary actions in sidebar, contextual actions in header, global search prominence, and responsive collapsibility. These are not generic admin templates but product-engineered app frameworks.
All app shells use Tailwind CSS with accessible navigation, keyboard shortcuts, and responsive breakpoints. React components handle sidebar state, user menus, and notification systems. Use these as templates for SaaS dashboards, web applications, or admin panels.
- Navigation hierarchy: primary navigation in sidebar, secondary in header
- Search prominence: global search positioned in header with keyboard shortcut
- User context: account menu and notifications in top-right corner
- Responsive collapsibility: sidebar collapses to icon-only or mobile menu
- Breadcrumb clarity: show current location within navigation hierarchy
Read more
Designing effective app shell navigation
A high-quality app shell separates primary navigation (sidebar) from contextual actions (header). Primary navigation links to major product areas: Dashboard, Projects, Settings. Contextual actions apply to current view: Create New, Filter, Export. This separation improves scannability and reduces cognitive load.
Weak app shells fail because they mix navigation levels or hide critical actions. If your sidebar includes both major sections and page-specific filters, users cannot distinguish hierarchy. Instead, reserve the sidebar for top-level navigation and place contextual actions in the header or content area.
- Separate navigation levels: sidebar for primary, header for contextual.
- Position global search: place in header with keyboard shortcut (⌘K).
- Group user actions: account menu, notifications, and help in top-right.
- Support keyboard navigation: assign shortcuts for common actions.
- Collapse responsively: sidebar becomes icon-only or mobile menu.
Common app shell mistakes
The most damaging mistake is overloading the sidebar with too many navigation items. If your sidebar has 15+ links, users cannot scan efficiently. Limit primary navigation to 5-7 major sections and use nested menus or secondary navigation for sub-items.
Another frequent error is unclear active state. If users cannot tell which page they are on, navigation fails. Use background color, border, or font weight to indicate the active navigation item.
- Do not overload sidebar; limit to 5-7 primary navigation items.
- Do not hide active state; clearly indicate current page in navigation.
- Do not mix navigation levels; separate primary (sidebar) from contextual (header).
- Do not omit keyboard shortcuts; support ⌘K search and ⌘/ help.
- Do not ignore mobile; sidebar must collapse to hamburger menu on small screens.
FAQs
Should I use a sidebar or top navigation for SaaS apps?
Sidebar works best for products with 5+ primary sections. Top nav works for simpler apps with 3-4 sections.
How should I handle nested navigation in app shells?
Use collapsible sidebar sections or secondary navigation in header. Avoid nesting beyond 2 levels.
Should I include breadcrumbs in app navigation?
Yes, for multi-level hierarchies. Position breadcrumbs in header to show current location.
Best Practices
Rules for applying these patterns
Navigation hierarchy
Use primary nav for top-level modules and secondary nav for task-specific pages.
Workspace clarity
Expose workspace or account switching with clear labels and status.
Density consistency
Keep padding and typography consistent across modules to reduce fatigue.
Sticky utility
Keep search and global actions accessible via sticky header or command palette.
Implementation Checklist
Pre-launch checklist
- 01Primary nav visible on all screens.
- 02Workspace switcher includes active status.
- 03Content width capped for readability.
- 04Global search easily accessible.
- 05Contextual actions aligned to page header.
Design Library
Representative designs
ZenFlow Notifications: Mindful Dashboard
This 'ZenFlow Dashboard' design transforms the traditional notification center into a tranquil, focused stream of information. Embracing the 'Japanese Zen Minim…
Dashboard
Neon Synth Dashboard Interface
Immerse yourself in a high-contrast Cyberpunk Neon Pink & Blue dashboard, crafted for optimal visual hierarchy and a captivating user experience. Its intuitive …
Dashboard
Bento Grid Dashboard
This 'Bento Grid Dashboard' layout, featuring a striking 'Sunset Orange & Red' art direction, delivers a modern and highly organized data visualization experien…
Dashboard
Quantum Grid Monitor Dashboard
This dashboard leverages a 'Horizontal Scroll Feature List' layout with a 'High-tech Wireframe' art direction, ideal for displaying multiple key performance ind…
Dashboard
Deep Ocean Dashboard: Minimalist Article Feed
This dashboard presents a minimalist article feed, designed for optimal content consumption in a tranquil 'Deep Ocean Dark Mode' environment. Its clean typograp…
Dashboard
Vibrant Memphis Pop Dashboard with Live Activity
This dashboard employs a 'Live Activity Feed Sidebar' layout, providing a dedicated, real-time stream of user interactions and system events alongside core oper…
Dashboard
Swiss Typographic Dashboard Overview
This dashboard leverages an accordion layout to present complex information in a digestible, on-demand format, ideal for summarizing various data points within …
Dashboard
Industrial Operations Dashboard
This dashboard provides a 'Notification Center List' layout, designed for critical oversight of industrial operations, emphasizing a robust 'Industrial Raw Conc…
Dashboard
Eco-Metrics Dashboard: Environmental Impact Tracking
This dashboard provides a comprehensive view of environmental metrics, utilizing a data-rich table with pagination for efficient data navigation and analysis. E…
Dashboard
Cluster Routing
Keep the strategy → collection → design flow
Playbook
Dashboard UX Design Principles
Density scale, card hierarchy, and dark mode token recipes modeled after Linear and Vercel.
Adjacent Collection
Minimalist Dashboards
Dashboard references that balance data density, dark mode, and micro-interactions for internal tools and customer-facing admin UIs alike.
Adjacent Collection
Analytics & KPI Dashboards
Analytics layouts that surface key metrics, trends, and anomalies without noise.
Adjacent Collection
Admin & Operations Tables
Admin layouts with dense tables, bulk actions, and contextual filters built for operations teams.
FAQ
Frequently asked questions
What makes a strong app shell?
Stable navigation, predictable content rails, and clear workspace context.
Should app shells support density toggles?
Yes, especially for power users who spend hours inside the UI.
How do I avoid navigation sprawl?
Use a primary/secondary hierarchy and limit top-level modules.
Pillar Playbook
Dashboard UX Design Principles
Hierarchy and density patterns for application shells.
Read the playbook