# Drill-Down Analytics > Breadcrumbed hierarchy, removable filter chips and expandable rows: start at the total, click a funnel step and dig down to the table that explains it. - Nickname: Click to dig - Also called: Hierarchical analytics, Explorer dashboard, Master–detail analytics - Category: Dashboards & Data - Moods: Techy, Trustworthy, Calm - Industries: E‑commerce, SaaS, Corporate & B2B, Fintech & Banking, Media & Entertainment - Style page: https://uilingo.dev/styles/drill-down-analytics/ An exploratory analytics layout built around one gesture — click to go one level deeper. A breadcrumb trail (All stores › Bangkok › Ceramics) always shows where you are, removable filter chips show what is applied, and the page flows from a summary funnel or bar into a tree table whose rows expand to reveal children on indented guide lines. The selected segment is outlined in indigo and every level carries a small L1/L2/L3 depth tag. Cool, clean surfaces keep focus on the path. ## Best for - Sales by region → store → product exploration - Marketing attribution and campaign break-downs - Inventory and catalogue analytics - Support or ops metrics with many dimensions ## Avoid for - Single-glance executive screens - Live monitoring walls - Mobile-first consumer apps with shallow data ## Do - Always show a breadcrumb with each level clickable - Make every applied filter a removable chip and offer “Clear all” - Indent child rows ~50px with a 1px guide line and elbow, and a rotating chevron on the parent - Outline the drilled segment (2px primary) so the path stays visible ## Don't - Don’t open drill-downs in modals that hide the context - Don’t go deeper than 3–4 levels on one screen - Don’t reset filters silently when the level changes ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Drill-Down Analytics" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Breadcrumbed hierarchy, removable filter chips and expandable rows: start at the total, click a funnel step and dig down to the table that explains it. Design keywords: breadcrumb trail, filter chips with ×, expandable rows, tree table with guide lines, funnel to table, selected segment outline, level tags L1 / L2 / L3, master–detail. ## Visual language A clean, cool exploratory analytics UI organised around one gesture: click to go a level deeper. Light #F5F6FA canvas, white 12px-radius cards, indigo #4F46E5 as the ‘you are here’ colour. A breadcrumb trail with small L1/L2/L3 depth tags sits at the top of every view, applied filters are removable pill chips in a dashed tray, and data flows from a summary (funnel or bars) into a tree table whose rows expand on rotating chevrons with 1px indigo-grey guide lines. The drilled segment is always outlined in indigo so the path stays visible. ## Signature details (must be visible) - Breadcrumb that follows the region → store → product hierarchy: ‘All stores L1 › Bangkok L2 › Ceramics L3’ (in Thai, translate the crumb names and keep the Latin L-tags) — muted links, chevron separators, current crumb as a white pill with a solid indigo level tag - L-tags (small mono L1/L2/L3 on a 4px-radius chip) mean hierarchy depth only. Landing ‘how it works’ steps reuse them because each step is one level deeper - Filter tray: dashed 1px indigo-tinted border, chips as ‘Key: value ×’ with a round 20px × button, ‘+ Add filter’ ghost button and ‘Clear all’ link on the right - Tree table: grid rows (name / value / share bar / sparkline), level-1 rows with a chevron that rotates 90° when open, level-2 rows indented 50px (24px chevron column + 26px step) on a 1px guide line with an elbow connector - Selected segment: an inset 0 0 0 2px #4F46E5 ring on a 9% indigo tint for rows, chips and funnel steps; for bars use an outer 2px ring with a 2px offset (box-shadow: 0 0 0 2px surface, 0 0 0 4px #4F46E5) - Every KPI card and feature card shows a chevron affordance (28px round button, top-right) and outlines in indigo on hover - A back-arrow button next to the page title (‘Drilled into Ceramics’) to go up one level - Eyebrow pill: a literal muted ‘…’ crumb, a 12px chevron, then the label in indigo #4F46E5 600, inside a white pill with a 1px border ## Design tokens — use these exact values Colours (light mode): - background #F5F6FA - surface #FFFFFF - surface-2 #EEF0F7 - text #161A2E - text-muted #565C78 - primary #4F46E5 (text on it #FFFFFF) - secondary #E0E3FF (text on it #2E2A8A) - accent #0891B2 - border #DDE1EC - success #12805C · warning #B25E09 · danger #D92D20 - chart series #4F46E5, #0891B2, #A855F7, #F59E0B, #94A3B8 Radius: sm 6px, md 8px, lg 12px, xl 16px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(22,26,46,0.06)`, md `0 6px 18px rgba(22,26,46,0.08)`, lg `0 18px 44px rgba(22,26,46,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Manrope 600/700/800 with Thai fallback Prompt 500/600/700 - Body: Manrope 400/500/600 with Thai fallback Anuphan 400/500/600 - Mono: Roboto Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&family=Prompt:wght@500;600;700&family=Anuphan:wght@400;500;600&display=swap - CSS stacks: heading `"Manrope", "Prompt", system-ui, sans-serif`; body `"Manrope", "Anuphan", system-ui, sans-serif`; mono `"Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.6rem), heading weight 700, heading tracking -0.03em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt’s clean geometric loopless shapes match Manrope’s modern grotesque headings, and Anuphan keeps the same friendly, open proportions for body text and table cells. ## Components - Buttons: 8px radius; primary indigo, hover darkens 12%; secondary white with border, hover turns border and text indigo - Chips: pill; active/applied chip = soft indigo #E0E3FF with dark indigo text and a round × at the end - Cards: white, 1px #DDE1EC, 12px radius, shadow 0 1px 2px; hover = indigo border + 1px indigo ring + deeper shadow, chevron turns indigo - Feature icons: 40px soft-indigo #E0E3FF tile with 8px radius holding a 20px lucide line icon in #4F46E5 - Funnel: rounded steps filled with indigo at 100 / 70 / 50 / 35% opacity from top to bottom; the drilled step is a white fill with a 2px indigo ring and a 24px × 2px connector toward the table (hidden below 768px) - Share bars: 6px indigo bars with the % in tabular figures - FAQ / accordions: chevron instead of +/−, rotates 90° on open, open item gets a 2px indigo left rule - Inputs: 8px radius; focus = indigo border + 3px indigo 18% ring - Table rows: leading chevron in the first cell to signal they can be opened - CTA: indigo panel with 1px rgba(255,255,255,0.08) vertical lines every 48px, fading in from the left; white button with indigo text - Mobile lists: every row ends in a chevron (tap-through to the next level); the price or value sits under the title, not as a trailing badge - Tab bar: active icon sits in a soft indigo pill ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → steps → features → showcase → testimonials → pricing → faq → cta. Feature section as grid. Landing: light nav, split hero whose product shot starts with a real text breadcrumb bar (‘All stores L1 › Bangkok L2 ›’ then the current crumb as a pill with an indigo L3 tag) and outlines the main chart as ‘selected’; numbered steps shown as L1/L2/L3 tags joined by a dashed guide; 6 feature cards with chevron affordances in a 3-column grid (two full rows); an accordion FAQ with rotating chevrons; and the indigo CTA with faint vertical grid lines. Dashboard: sidebar shell; breadcrumb → title with back button → filter tray → clickable KPI cards → funnel (4 cols) feeding an expandable tree table (8 cols) → trend of the drilled segment (8) beside a sibling comparison (4) with the selected bar ringed. The components sheet opens with the breadcrumb, filter tray and a tree-row sample. ## Content Use realistic product copy (fictional brand) suited to: Sales by region → store → product exploration. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Always show a breadcrumb with each level clickable - Make every applied filter a removable chip and offer “Clear all” - Indent child rows ~50px with a 1px guide line and elbow, and a rotating chevron on the parent - Outline the drilled segment (2px primary) so the path stays visible ## Don't - Don’t open drill-downs in modals that hide the context - Don’t go deeper than 3–4 levels on one screen - Don’t reset filters silently when the level changes - Showing every level at once in dense panels (that is Data-Dense) - Opening detail in modals that hide the breadcrumb and filters - Period-over-period side-by-side layouts as the main structure (that is Comparative Analysis) - Warm or neon palettes — keep surfaces cool and indigo as the single ‘selection’ colour - Plus/minus icons for expansion — always chevrons ## Stack notes One self-contained HTML file with a