The persistent frame around an application: header, sidebar or drawer, active navigation state, breadcrumbs, search, and content region. The shell helps users understand where they are, where they can go, and what stays stable while pages change.
Use the shell when a product has enough information architecture that users need a persistent frame, not just links inside page content.
The shell owns global orientation. Page content owns the task inside the frame.
The persistent top bar contains product identity and global actions such as search, help, account, or theme.
Keep global controls in the header; do not repeat them inside every page.
A sidebar or drawer lists major sections and exposes the active section and page.
Use links for navigation destinations and buttons only for expand/collapse behavior.
Use breadcrumbs when the current page sits under a parent or detail object. They should mirror hierarchy, not browser history.
Do not show breadcrumbs for single-level pages where the sidebar already answers location.
The main landmark holds page-specific content. The shell stays stable while this region changes.
Use one main region and avoid nesting independent app shells inside it.
On smaller screens, collapse primary navigation into a drawer controlled by a visible menu button.
Manage focus when the drawer opens and closes, and preserve the same navigation labels across breakpoints.
The same navigation model adapts across desktop, mobile, and local detail contexts.
A persistent header and left navigation for multi-section products.
Trigger: Desktop or tablet-wide products with stable information architecture and repeated cross-section navigation.
Job: Keep the current section visible, expose sibling destinations, and reserve the main area for page content.
A compact header with navigation behind a menu button.
Trigger: Small screens where a persistent sidebar would crowd the content.
Job: Keep global orientation available without shrinking the main task area.
A product shell plus local tabs or links for a detail area.
Trigger: A detail page has several sibling views, such as Summary, Activity, Documents, and Settings.
Job: Keep global navigation separate from local detail navigation.
The previews show the frame, the active location, and the relationship between global and local navigation.
Vendor portal
The sidebar shows major product sections while the breadcrumb confirms the current page.
The sidebar shows major product sections while the breadcrumb confirms the current page.
Mobile vendor portal
The menu button opens the same navigation tree and returns focus when closed.
The menu button opens the same navigation tree and returns focus when closed.
Vendor detail
The shell shows global location; local tabs switch within the current vendor.
The shell shows global location; local tabs switch within the current vendor.
Active page state
Vendors
The sidebar section is highlighted, but no child page has aria-current or visible active state.
Vendor overview
The active page link is visibly selected and marked with aria-current="page."
Vendor overviewUsers need to know the exact page they are on, not just the broad section.
Mobile navigation
Hidden navigation
The sidebar disappears on mobile with no equivalent menu or focus behavior.
Menu button opens navigation
The same navigation tree opens in a drawer, focus is managed, and labels remain consistent.
Open menuResponsive behavior should preserve orientation, not remove it.
Navigation copy is product vocabulary. Keep labels stable enough that users can build a map of the product.
Navigation labels should be short nouns or noun phrases: "Vendors," "Documents," "Settings." Avoid clever verbs or campaign language.
Sidebar labels, breadcrumbs, page titles, and search results should use the same terms for the same destination.
The active navigation item should match the page heading or the nearest plain-language equivalent.
Global utilities belong in the header. Page-specific actions belong near the page title or form actions.
Shell accessibility depends on landmarks, active state, expand/collapse semantics, and drawer focus management.
Header, navigation, main, and footer regions should be semantic so assistive technology users can jump between them.
Use aria-current="page" on the active navigation link. Do not rely on color alone to mark the current page.
Expandable navigation groups use buttons with aria-expanded and aria-controls. Links remain links.
When the drawer opens, focus moves into it. When it closes, focus returns to the menu button. Escape closes the drawer.
The shell should be centralized. Every product area should not invent its own frame.
Navigation labels and paths should come from one registry so the sidebar, breadcrumbs, and coming-soon routes do not drift.
Global shell navigation answers where the user is in the product. Local tabs or links answer where they are inside the current object.
Use this as the acceptance gate before approving a navigation shell.
