Navigation Patterns

Side navigation, mobile drawers, profile dropdowns, and account management cards.

Navigation Architecture

Side Navigation (Desktop)

Dashboard

Total

€2,847

all expenses

Scanned

receipts

Lists

active

Specifications

Width Expanded

240px (15rem)

Width Collapsed

64px (4rem)

Background

neutral-50 / neutral-900/50

Border

neutral-200 / neutral-800

Item Height

44px (11rem)

Icon Size

20px (w-5 h-5)

Transition

300ms ease-in-out

Typography

text-sm font-light

Mobile Drawer Navigation

gonto

Dashboard

€2,847

Total expenses

Mobile Specifications

Drawer Width

280px (18rem)

Animation

300ms ease-in-out

Backdrop

bg-black/50

Z-Index

z-50 (drawer), z-40 (backdrop)

Account Management Cards

Visa ending 4242

Expires 12/2026

Balance€1,247.50

Limit€5,000.00

Checking Account

••••5678

Current Balance€3,842.67

Last Updated2 hours ago

Account Card Specifications

Card Stylep-6 rounded hover transition-colors

Icon Containerp-2 bg-white dark:bg-neutral-950 rounded

Card TypesCredit Card, Debit Card, Bank Account, Cash