Breadcrumbs

Shows hierarchy and provides a path back through nested dashboard levels.

Where to use it

Place it above the page title when the current screen sits inside a meaningful multi-level hierarchy.

When to use it

Use them when users need to understand and move through a meaningful hierarchy.

When not to use it

Avoid them in flat products or as a substitute for browser/history navigation.

Behavior and rules

Show hierarchy, not browsing history. The last item is the current location and should not behave like another forward link.

Anatomy

Root destination: The top of the path (Billing), always a link, so people can climb back to the start.
Ancestor destination: Each level between root and here is a link to that level. Long trails collapse the middle into “…”.
Separator: A chevron or slash that shows hierarchy. It is decorative, hidden from screen readers, and mirrors in RTL.
Current page: Plain text, not a link, marked aria-current="page". It shows where you are.

All lessons

Bar Chart — Compares values across categories using length on a common scale.
Line Chart — Shows change across an ordered sequence, most often time.
Area Chart — Emphasizes magnitude over an ordered sequence by filling the area under a line.
Pie / Donut Chart — Shows a small number of parts that make up one meaningful whole.
Scatter Plot — Reveals relationships, clusters and outliers between two numeric variables.
Histogram — Shows the distribution of a numeric variable across value ranges.
Box Plot — Summarizes distribution, median, spread and potential outliers compactly.
Heatmap — Uses color intensity across a matrix to reveal patterns and concentration.
Treemap — Shows hierarchical part-to-whole relationships through nested rectangles.
Funnel Chart — Shows how a population changes through ordered stages of a process.
Waterfall Chart — Explains how positive and negative contributions produce a final total.
Sparkline — Shows a compact trend without the full framing of a standard chart.
Gauge — Shows one value within a bounded range when position against a threshold matters.
Combo Chart — Combines compatible visual marks when two related measures need coordinated comparison.
Geographic Data Map — Maps values to locations or regions when geography is part of the question.
KPI / Stat Card — Presents one important metric with enough context to judge its current value and change.
Data Table — Presents structured records in rows and columns, with table-level search, filtering, sorting, selection and pagination treated as parts of the whole component.
Dashboard Card / Panel — Groups one coherent dashboard task, metric or visualization into a bounded region with clear hierarchy.
Filter Bar — Places the most important scope controls close to the data they affect.
Filter Panel — Collects a larger set of filtering controls in a dedicated surface.
Date Picker / Date Range Picker — Lets users choose one date or a bounded time range for reports, filters and analytics.
Sidebar Navigation — Provides persistent access to major dashboard destinations and groups.
Top App Bar — Holds page identity, global actions and high-priority controls at the top of an application.
Breadcrumbs — Shows hierarchy and provides a path back through nested dashboard levels.
Tabs — Switches between peer views inside the same dashboard context.
Alert / Banner — Communicates important contextual or page-wide information that should remain visible until understood or resolved.
Toast — Confirms a brief asynchronous outcome without blocking the current task.
Notification Center — Collects system and workflow updates that users may need to revisit.
Dropdown / Overflow Menu — Moves lower-priority or contextual actions into an on-demand menu.
Modal / Dialog — Creates a focused temporary task that may block interaction with the underlying dashboard.
Drawer / Side Panel — Opens contextual controls or details from an edge while preserving the page behind it.