VibeUI Logo
VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

Design ingredients for AI coding. Built for Cursor, Windsurf, and beyond.

Back to Explore

Notion Breadcrumb 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.

minimalwarmsaaseducationcreative

Interactive Preview

Notion Breadcrumb NavContext over hierarchy.
Preview
Build a Notion-style breadcrumb navigation bar.

Design philosophy — navigation as context:
1. Background: White (#ffffff) with a 1px bottom border (#e8e5e0). 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 #9b9a97 for ancestors, #37352f for current page. Segments separated by "/" in #d3d1cb. 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 #9b9a97, hover → #37352f. 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 (#f7f6f3) on hover.

The nav should feel like a file manager breadcrumb, not a marketing nav.