Unsaved changes
Your quote has changes that haven't been saved. What would you like to do?
Navigation System
Prototype · Screen 1 of 9 · v6.1
Desktop

Top Navigation Bar

Glassmorphism. Sticky. Always present. Amber top seam anchors it. Click items to change active state. Click "New Quote" to see the accent button. Click "⚠ Guard" to trigger the nav guard.

Live Component — click items Interactive
Sithiyam OS
HZ
Studio
Quote Builder · Active screen
Mr. Arjun Sharma — Golden Triangle
8 nights · 2 adults
The nav is always 56px. On screens narrower than 900px the labels disappear — items become icon-only. Below 720px the desktop nav disappears entirely and the mobile bottom bar takes over.
Desktop States

Every Variant

Default, active, hover (cursor over item), with badge, icon-only condensed mode, and the New Quote button in isolation.

Default — no active
Sithiyam OS
◫Dashboard
✦Studio
⌂Hotels
Active — Studio selected
Sithiyam OS
◫Dashboard
✦Studio
⌂Hotels
With Badges — Dashboard (12 quotes)
Sithiyam OS
◫Dashboard12
✦Studio
⌂Hotels
Condensed — Icon Only (900px)
SO
◫
✦
⌂
◈
⚡
HZ
Mobile

Bottom Tab Bar

Fixed to the bottom. Always visible. 5 positions. Inactive tabs show icon only (muted). Active tab expands into a pill with icon + label via spring animation. New Quote is always an amber metallic pill. Click tabs in the dark frames to see the interaction.

Dashboard Active
Pipeline
12 active quotes
12
Active
3
Pending
₹8.4L
Pipeline
Mr. Arjun Sharma
Golden Triangle · 8 nights
₹2,84,500
Draft
Ms. Priya Mehta
Kerala · 6 nights
₹1,92,000
Confirmed
Dash
Studio
New
Hotels
More
Studio Active
Studio · Route
Mr. Arjun Sharma
Golden Triangle · 8 nights · Draft
Setup
Route
Hotels
Pricing
Day 1
Delhi
🏨
The Imperial, Delhi
Deluxe · ₹28,000
+ Add Activity
Dash
Studio
New
Hotels
More
Light Mode
Pipeline
12 active quotes
12
Active
₹8.4L
Pipeline
Mr. Arjun Sharma
Golden Triangle · 8 nights
₹2,84,500
Draft
Dash
New
Safety Layer

Navigation Guard

Fires only when there are genuine unsaved changes. Never on a clean saved quote. Desktop shows a centred dialog. Mobile shows a bottom sheet. Both offer the same three choices.

Desktop Dialog
✦
Unsaved changes
Your current quote has changes that haven't been saved. What would you like to do before leaving?
Triggered by: leaving Studio when _isDirty = true or unbuilt days exist. Never fires on a clean saved quote.
Mobile Sheet
Unsaved changes
Your quote has unsaved changes. What would you like to do?
Bottom sheet slides up from below. Same three choices. Dismisses by tapping the scrim or dragging down.
Live demo — see the real overlay and sheet
Responsive

Breakpoint Behaviour

The nav adapts at three breakpoints without a layout shift. The experience is consistent — only the density changes.

1440px+
Full desktop nav · Wordmark + labels + badges + New Quote button + avatar
900px
Condensed · Labels hidden, icons only. New Quote collapses to + icon. Avatar stays.
720px
Desktop nav disappears. Mobile bottom tab bar appears. Full-capability maintained.
375px
Mobile bottom bar. 5 tabs. Touch targets all 44px+. Safe area insets respected.
Navigation — Approval Checklist

Test every item below before approving. Click each checkbox as you confirm it.

Desktop nav — dark mode renders correctly
Desktop nav — light mode renders correctly
Active state — amber dot + filled bg visible
Hover state — subtle bg change on mouse over
New Quote button — metallic gradient correct
Badge — number pill on Dashboard item
Mobile bottom bar — dark mode correct
Mobile bottom bar — light mode correct
Mobile tab active — pill expands with icon + label
New Quote tab — amber metallic pill, always labeled
Nav guard desktop dialog — all 3 actions
Nav guard mobile sheet — slides up correctly
Glassmorphism — blur effect visible on nav
Amber seam — hairline at top of nav bar
Test on your actual phone (Netlify)
Overall feel — "Apple-grade" navigation