Two layers of navigation, one layer of trust. A persistent global bar (dark, profile, search) sits above a contextual tab bar that shapeshifts per section — Code, Issues, Pull Requests. The genius isn't either bar alone, it's the separation: the top bar answers 'who am I and where am I,' the bottom bar answers 'what can I do here.' This dual-layer pattern scales to millions of repositories without ever needing a redesign.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a GitHub-style dual-layer contextual navigation bar.
Design philosophy — predictable scalability:
1. Global bar (top): bg #0F172A, height 48px. Contains: logo (left), search bar (center, 45% width), profile/notifications (right).
2. Search bar: bg #0F172A, border #334155, rounded-md, placeholder text "Type / to search" in #94A3B8. 14px input text.
3. Context tab bar (below): bg #0F172A, height 48px, border-bottom #334155. Contains horizontal tabs that change per section.
4. Tab styling: 14px, font-weight 400, color #94A3B8, padding-bottom 12px. Active tab: color #F8FAFC with a 2px bottom border in #06B6D4 (orange) or #06B6D4 (blue).
5. Tab icons: 16px icons before each tab label. Counters (issue count, PR count) as rounded-full badges in bg #334155.
6. Logo: GitHub mark (Octocat silhouette) in #F8FAFC, 32px. Positioned left with a breadcrumb after it (org / repo).
7. Profile section: Avatar circle (20px) + dropdown chevron.
The dual-layer eliminates the need for complex mega-menus — hierarchy is spatial, not nested.Two layers of navigation, one layer of trust. A persistent global bar (dark, profile, search) sits above a contextual tab bar that shapeshifts per section — Code, Issues, Pull Requests. The genius isn't either bar alone, it's the separation: the top bar answers 'who am I and where am I,' the bottom bar answers 'what can I do here.' This dual-layer pattern scales to millions of repositories without ever needing a redesign.