Context over hierarchy. A top bar that reads like a file path — each segment is clickable, and the current page title is editable inline. The navigation IS the content structure. No dedicated 'nav links' section because the breadcrumb trail tells you where you are and where you can go.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Notion-style breadcrumb navigation bar.
Design philosophy — navigation as context:
1. Background: White (#FFFFFF) with a 1px bottom border (#E2E8F0). The border only appears on scroll (not visible at top).
2. Layout: Fixed top, full-width. Left side: breadcrumb trail. Right side: action icons (share, favorite, more).
3. Breadcrumb: Each segment is 14px, font-weight 400, color #64748B for ancestors, #0F172A for current page. Segments separated by "/" in #E2E8F0. Each ancestor segment is a link with hover underline.
4. Current page: The last breadcrumb segment is larger (14px, weight 500) and can optionally appear as an inline-editable text input.
5. Icons: Right-side actions use 16px icons in #64748B, hover → #0F172A. Spacing: gap-1. Common actions: Share, Star/Favorite, Clock (history), More (...).
6. Height: 45px. Slim and unobtrusive.
7. Hover behavior: Breadcrumb segments show a subtle rounded-md bg (#F8FAFC) on hover.
The nav should feel like a file manager breadcrumb, not a marketing nav.Context over hierarchy. A top bar that reads like a file path — each segment is clickable, and the current page title is editable inline. The navigation IS the content structure. No dedicated 'nav links' section because the breadcrumb trail tells you where you are and where you can go.