Dashboard Shell
New
A complete dashboard layout with sidebar navigation, header with user menu and notifications, and full RTL support. Perfect for admin panels and web applications.
Preview
Usage
Reacttsx
Features
Responsive Sidebar
Desktop sidebar and mobile sheet with smooth animations
Bilingual Navigation
Support for English and Arabic navigation labels
User Menu Integration
Built-in user menu with profile and logout actions
Notification Center
Integrated notification system with unread badges
RTL Support
Automatic layout flip for right-to-left languages
Sticky Header
Fixed header with backdrop blur for modern look
Examples
With Notifications
tsx
Full Featured
tsx
NavItem Type
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content to display in the main area |
navItems | NavItem[] | — | Navigation menu items with bilingual titles |
user | { name?: string; email?: string; image?: string; initials?: string } | — | User information for the user menu |
notifications | Notification[] | — | Notifications for the notification center |
logo | React.ReactNode | — | Custom logo component |
logoHref | string | — | URL for the logo link |
sidebarWidth | string | — | Width of the sidebar |
onProfileClick | () => void | — | Callback when profile is clicked |
onSettingsClick | () => void | — | Callback when settings is clicked |
onLogout | () => void | — | Callback when logout is clicked |
Best Practices
Do
- ✓ Keep navigation items organized and intuitive
- ✓ Provide visual feedback for the active navigation item
- ✓ Make the sidebar collapsible for more screen space
- ✓ Ensure consistent spacing and alignment across sections
- ✓ Use responsive design for mobile devices
Don't
- ✗ Don't overcrowd the sidebar with too many items
- ✗ Don't hide important navigation without a way to access it
- ✗ Don't forget to test on different screen sizes
- ✗ Don't use inconsistent navigation patterns
- ✗ Don't neglect keyboard navigation support
Accessibility
- ✓Keyboard navigation with Tab and Enter keys
- ✓ARIA current="page" on active navigation items
- ✓Proper semantic HTML with nav, main, and header elements
- ✓Focus management in mobile sheet
- ✓Screen reader friendly labels for all interactive elements