# UI Navbars Catalog — AI Prompt Sheet

Stable names and construction recipes for the fifteen patterns in [`index.html`](./index.html).  
Copy a **Prompt phrase** into another AI chat, or ask for the CSS root class from [`navbars.css`](./navbars.css).

Shared tokens live in [`styles.css`](./styles.css). Burger toggles use a checkbox + label (`.nav-check` / `.nav-burger`) and `:has(.nav-check:checked)` for open state.

Demo behaviors in [`navbars.js`](./navbars.js): `aria-expanded` sync, Escape to close, close on link click, close when resizing past the pattern breakpoint, announcement dismiss, exclusive mega `<details>`.

## Shared design tokens

`:root` in [`styles.css`](./styles.css) is a worked example of CSS variables beyond colour-only themes — layout size, breakpoints, glass, motion, and type sit alongside the palette.

| Token | Role |
|---|---|
| `--ink`, `--ink-muted`, `--ink-faint` | Primary text and quieter copy |
| `--surface`, `--surface-raised` | Page background and raised chrome |
| `--accent`, `--accent-soft`, `--accent-deep` | Brand accent and soft/deep variants |
| `--border`, `--border-strong` | Default and stronger dividers |
| `--nav-radius` | Shared corner radius for nav shells |
| `--nav-shadow` | Soft elevation under nav bars |
| `--glass-bg`, `--blur` | Frosted panel fill and backdrop blur |
| `--motion` | Default transition timing (`200ms ease`) |
| `--font-sans` | Gallery UI type stack |
| `--max` | Content max-width (`72rem`) |
| `--bp-sm`, `--bp-md`, `--bp-lg` | Breakpoints at 640 / 768 / 900 (`40rem` / `48rem` / `56.25rem`) |

Sizing, spacing, and breakpoint tokens here show how a component gallery can share layout contracts the same way it shares colour — copy the pattern when extending patterns or spinning up new nav demos.

## Navigation item count (Miller's Law)

Keep each **primary** link group near **~7 items** (comfortably about 5–9; **9 is the absolute max** before chunking). Mega-menus and utility clusters should be labelled groups, not one undifferentiated list of a dozen peers. Patterns in this catalog that grow denser (mega, split clusters) demonstrate chunking — do not treat every visible anchor as one flat primary set.

---

## 1. Classic Brand Bar

| | |
|---|---|
| **Class** | `.nav-classic-brand` |
| **Breakpoint** | Burger ≤768px (`48rem`) |
| **Prompt phrase** | Use a **Classic Brand Bar**: logo left, horizontal links, CTA right; on small screens a hamburger opens an under-bar vertical link list. |

**Construction**
- Flex wrap header; panel holds links + CTA
- Mobile: hide panel until `:has(.nav-check:checked)`

---

## 2. Split Cluster Nav

| | |
|---|---|
| **Class** | `.nav-split-cluster` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Split Cluster Nav**: brand | primary links | utility + avatar; mobile drawer shows labeled Primary and Account groups. |

**Construction**
- Flex header with a panel containing two clusters
- Mobile panel stacks with `__group-label` headings

---

## 3. Centered Logo Island

| | |
|---|---|
| **Class** | `.nav-logo-island` |
| **Breakpoint** | Burger ≤640px (`40rem`) |
| **Prompt phrase** | Use a **Centered Logo Island**: CSS grid `1fr auto 1fr` with centered logo; burger keeps the logo centered and stacks left/right link groups. |

**Construction**
- Three-column grid; absolute burger on the right
- Mobile: left/right lists span full width under the logo

---

## 4. Underline Tab Nav

| | |
|---|---|
| **Class** | `.nav-underline-tabs` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use an **Underline Tab Nav**: bottom border on the bar with active underline tabs; mobile uses left accent border rows instead. |

**Construction**
- Links as tabs with `border-bottom` active state
- Mobile: left border + soft fill for current page

---

## 5. Pill Segment Nav

| | |
|---|---|
| **Class** | `.nav-pill-segment` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Pill Segment Nav**: links inside a shared pill track, CTA outside; mobile expands full-width soft pills in a drawer. |

**Construction**
- Nested rounded track with gap; active item filled
- Mobile: column track + block CTA

---

## 6. Mega Panel Nav

| | |
|---|---|
| **Class** | `.nav-mega-panel` |
| **Breakpoint** | Burger ≤900px (`56.25rem`) |
| **Prompt phrase** | Use a **Mega Panel Nav**: desktop `<details>` mega panel with multi-column links; mobile accordion sections inside a burger drawer. |

**Construction**
- Desktop mega absolutely under the bar
- Separate `__mobile` accordion block for small screens

---

## 7. Sidebar Collapse Nav

| | |
|---|---|
| **Class** | `.nav-sidebar-rail` |
| **Breakpoint** | Burger ≤900px |
| **Prompt phrase** | Use a **Sidebar Collapse Nav**: persistent left icon/label rail on desktop; mobile top bar + left off-canvas rail with scrim. |

**Construction**
- Flex row: rail + main
- Mobile: fixed rail `translateX(-105%)`; open via `:has(.nav-check:checked)`; scrim label closes

---

## 8. Transparent Overlay Nav

| | |
|---|---|
| **Class** | `.nav-overlay-glass` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Transparent Overlay Nav**: frosted glass bar over a hero; mobile opens a solid light drawer for contrast. |

**Construction**
- `backdrop-filter` bar; light text/CTA
- Mobile panel uses solid raised surface and dark text

---

## 9. Search-Forward Nav

| | |
|---|---|
| **Class** | `.nav-search-forward` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Search-Forward Nav**: flex-grow search field, sparse links, icon buttons; burger opens links only while search stays in the bar. |

**Construction**
- Flex wrap with order utilities on mobile
- Search `flex: 1 1 12rem`; links toggle via `:has`

---

## 10. Bottom App Dock

| | |
|---|---|
| **Class** | `.nav-bottom-dock` |
| **Breakpoint** | Dock + burger ≤640px |
| **Prompt phrase** | Use a **Bottom App Dock**: desktop top link bar; on small screens a fixed bottom icon dock for primary destinations and a burger for overflow links. |

**Construction**
- Stage uses bottom padding for dock clearance
- `__dock` absolute in stage; `__overflow` for secondary links

---

## 11. Dual Tier Nav

| | |
|---|---|
| **Class** | `.nav-dual-tier` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Dual Tier Nav**: slim utility strip above the main bar; mobile merges Account then Menu into one drawer. |

**Construction**
- Utility row + main flex row
- Mobile hides utility/links; shows grouped `__drawer`

---

## 12. Breadcrumb Hybrid Nav

| | |
|---|---|
| **Class** | `.nav-breadcrumb-hybrid` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use a **Breadcrumb Hybrid Nav**: section links plus a trailing breadcrumb trail; burger collapses section links while crumbs remain. |

**Construction**
- Flex bar with `minmax`-friendly crumb list and `/` separators
- Mobile: crumbs full-width under bar; drawer for section links

---

## 13. Icon Rail Top Nav

| | |
|---|---|
| **Class** | `.nav-icon-rail-top` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use an **Icon Rail Top Nav**: horizontal icon+label toolbar; mobile flattens to icon+label list rows. |

**Construction**
- Column-oriented icon buttons on desktop
- Mobile: row list with bottom borders

---

## 14. Slide-Over Drawer Nav

| | |
|---|---|
| **Class** | `.nav-slide-over` |
| **Breakpoint** | Burger ≤900px |
| **Prompt phrase** | Use a **Slide-Over Drawer Nav**: minimal top (logo + CTA) with a persistent left drawer; on small screens the same drawer slides in from the right with a scrim. |

**Construction**
- Grid `drawer | content` on desktop
- Mobile: fixed right drawer `translateX(105%)`; distinct from left-rail pattern #7

---

## 15. Announcement Stack Nav

| | |
|---|---|
| **Class** | `.nav-announce-stack` |
| **Breakpoint** | Burger ≤768px |
| **Prompt phrase** | Use an **Announcement Stack Nav**: dismissible promo strip above a sticky main nav; burger collapses main links under both strips. |

**Construction**
- Banner + sticky `__bar`
- Mobile `:has(.nav-check:checked)` reveals links + full-width CTA

---

## Quick index

| # | Name | Class | Burger ≤ |
|---|------|-------|----------|
| 1 | Classic Brand Bar | `.nav-classic-brand` | 768px |
| 2 | Split Cluster Nav | `.nav-split-cluster` | 768px |
| 3 | Centered Logo Island | `.nav-logo-island` | 640px |
| 4 | Underline Tab Nav | `.nav-underline-tabs` | 768px |
| 5 | Pill Segment Nav | `.nav-pill-segment` | 768px |
| 6 | Mega Panel Nav | `.nav-mega-panel` | 900px |
| 7 | Sidebar Collapse Nav | `.nav-sidebar-rail` | 900px |
| 8 | Transparent Overlay Nav | `.nav-overlay-glass` | 768px |
| 9 | Search-Forward Nav | `.nav-search-forward` | 768px |
| 10 | Bottom App Dock | `.nav-bottom-dock` | 640px |
| 11 | Dual Tier Nav | `.nav-dual-tier` | 768px |
| 12 | Breadcrumb Hybrid Nav | `.nav-breadcrumb-hybrid` | 768px |
| 13 | Icon Rail Top Nav | `.nav-icon-rail-top` | 768px |
| 14 | Slide-Over Drawer Nav | `.nav-slide-over` | 900px |
| 15 | Announcement Stack Nav | `.nav-announce-stack` | 768px |