Dashboard Header

A top bar combining page title, breadcrumb navigation, and action buttons. Responsive: buttons collapse into a compact layout on mobile.

HomeProjectsAnalytics

Analytics Overview

With stats row

Dashboard

Last 7 daysLast 30 daysLast 90 days

Total Users

12,847

+12.5%

Active Sessions

1,024

+4.1%

Conversion Rate

3.24%

-0.8%

Revenue

€48.2K

+22.4%

Components used

• Breadcrumbs, Button
• Select, Stat Block

Key implementation details

• Header uses display: flex; justify-content: space-between with wrapping on small screens
• Breadcrumbs sit above the page title for contextual navigation
• Action buttons group on the right; on mobile they wrap below the title
• Stats row uses CSS Grid with repeat(auto-fit, minmax(160px, 1fr)) for responsive columns
• Trend indicators use green (up) and red (down) with directional arrows