Global Navigation Shell
The persistent application shell providing navigation, search, notifications, and user context across all screens.
Shell Layout Reference
BREADCRUMB
MAIN CONTENT AREA
Global Header
Persistent top bar with application branding, unified search, and user controls.
App name & branding
Global search (Ctrl+K)
Notification center with badge
Light/Dark theme toggle
User avatar & profile menu
Help & messages
Role-Based Navigation
Context-aware sidebar that adapts based on user role (Internal, Approver, Admin, Vendor).
Collapsible (hamburger toggle)
Expandable sub-menus
Active state highlighting
Badge counts for pending items
Tenant info in footer
Role-restricted menu items
Contextual Navigation
Multi-level breadcrumb trail showing user's current location within the application hierarchy.
Clickable parent links
Auto-generated from route
Current page highlighted
Module → Section → Screen depth
Content Area
Main Content Zone
Scrollable main area with bento-grid layout, card-based UI, and consistent enterprise spacing.
Full-height scrollable area
Responsive grid layout
Card-based content sections
Page header with actions
Keyboard Shortcuts
Global Search
CtrlK
Toggle Sidebar
CtrlB
Toggle Theme
CtrlD
Notifications
CtrlN
User Profile
CtrlU
Help
?