Patterns

Customer App

Customer-facing application layouts with top navigation, sidebar, content with tabs, and notification feeds.

Three-Panel Layout

Top nav + left sidebar + main content + optional right panel. Right panel hides on smaller screens.

My App

Welcome back

Projects

42

Activity

2h ago

Content with Tabs

Page header with a primary action, followed by a tabbed list of resource cards.

Projects

Manage your active projects

Project Alpha

4 members

Active

Design System

2 members

Active

Notification Feed

Dropdown or drawer panel showing recent activity with unread state and timestamps.

Notifications

2

  • New comment

    Alice commented on Project Alpha

    2m ago

  • Mention

    Bob mentioned you in a thread

    1h ago

  • Update

    Design System v2.1 has been released

    3h ago

Best Practices

Do

  • Persist navigation across route changes to avoid re-renders.
  • Use tabs to organize content at the section level, not the page level.
  • Highlight unread notifications with a subtle background tint.
  • Hide secondary panels on mobile — collapse to a drawer.

Don't

  • Do not put more than 5 tabs in a tab list — group into dropdowns.
  • Do not show notification counts without a clear "Mark all read" action.
  • Do not nest sidebars inside sidebars — keep navigation flat.
  • Do not use full-page loading states when partial updates suffice.

Accessibility

  • Use <header>, <nav>, <main>, <aside> for landmark regions.
  • Include a skip-to-main-content link before the top nav.
  • Tab components use role="tablist" / role="tab" — arrow-key navigation is expected.
  • Unread notification badges must have a visually-hidden text equivalent.