# Navigation Patterns (Tailwind+)

Consolidated list of all navigation patterns from Tailwind+ to convert to Flux UI.

**Total: 54 variants across 8 categories**

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/

---

## Navbars (11 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/navbars

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic horizontal navbar |
| 2 | Simple dark | Dark themed navbar |
| 3 | With search | Includes search input |
| 4 | With centered search | Centered search input |
| 5 | With quick action | Quick action button |
| 6 | With icons | Icon-based navigation |
| 7 | With user dropdown | User profile dropdown |
| 8 | With secondary nav | Two-level navigation |
| 9 | With disclosure | Expandable sections |
| 10 | Brand nav | Brand-coloured navbar |
| 11 | Dark with quick action | Dark theme + quick action |

---

## Pagination (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/pagination

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple card footer | Basic prev/next |
| 2 | Card footer with page buttons | Page number buttons |
| 3 | Centered with icons | Icon-based navigation |

---

## Tabs (9 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/tabs

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Tabs with underline | Underline active indicator |
| 2 | Tabs with underline and icons | Icons + underline |
| 3 | Tabs in pills | Pill-shaped tabs |
| 4 | Tabs in pills with brand colour | Branded pill tabs |
| 5 | Tabs in pills on gray | Pills on gray background |
| 6 | Full-width with underline | Edge-to-edge tabs |
| 7 | Bar with underline | Bar style + underline |
| 8 | Tabs with underline on gray | Gray background variant |
| 9 | Simple underline | Minimal underline style |

---

## Vertical Navigation (6 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/vertical-navigation

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic vertical list |
| 2 | With badges | Badge counts per item |
| 3 | With icons and badges | Icons + badges combo |
| 4 | With icons | Icon-based navigation |
| 5 | With secondary navigation | Nested subnav items |
| 6 | On gray | Gray background variant |

---

## Sidebar Navigation (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/sidebar-navigation

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Light | Light themed sidebar |
| 2 | Dark | Dark themed sidebar |
| 3 | With expandable sections | Collapsible groups |
| 4 | With secondary navigation | Two-level nav |
| 5 | Brand | Brand-coloured sidebar |

---

## Breadcrumbs (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/breadcrumbs

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Contained | Contained in container |
| 2 | Full-width bar | Full-width background |
| 3 | Simple with chevrons | Chevron separators |
| 4 | Simple with slashes | Slash separators |

---

## Progress Bars (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/progress-bars

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic horizontal progress |
| 2 | Panels | Panel-based steps |
| 3 | Bullets | Bullet point steps |
| 4 | Panels with border | Bordered panels |
| 5 | Circles | Circular step indicators |
| 6 | Bullets and text | Bullets with labels |
| 7 | Circles with text | Circles with descriptions |
| 8 | Progress bar | Linear progress indicator |

---

## Command Palettes (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic command palette |
| 2 | Simple with padding | Padded simple version |
| 3 | With preview | Preview panel for selected |
| 4 | With images and descriptions | Rich item display |
| 5 | With icons | Icon-based items |
| 6 | Semi-transparent with icons | Glassmorphism style |
| 7 | With groups | Grouped command items |
| 8 | With footer | Footer actions |

---

## Pattern Categories (for Flux UI organisation)

### By Type
- **Horizontal**: Navbars, tabs, pagination, breadcrumbs
- **Vertical**: Vertical navigation, sidebar navigation
- **Overlay**: Command palettes
- **Progress**: Progress bars

### By Theme
- **Light**: Default light variants
- **Dark**: Dark themed variants
- **Brand**: Custom brand colours

### By Features
- **With icons**: Icon-based navigation
- **With badges**: Count indicators
- **With search**: Search functionality
- **With dropdown**: Dropdown menus
- **Expandable**: Collapsible sections

---

## Conversion Priority

1. **Navbars - Simple** - most common header navigation
2. **Tabs - With underline** - content section switching
3. **Vertical Navigation - Simple** - sidebar navigation
4. **Breadcrumbs - Simple with chevrons** - page hierarchy
5. **Command Palettes - Simple** - keyboard navigation
