Nav Design Options

As the number of apps grows, the current wrap-all nav bar consumes too much vertical space. Below are five design patterns — each shown as an interactive demo — with trade-offs for each.

Option 1 Collapsed Hamburger / Drawer ★ Recommended

A single button in the nav bar opens a full-width slide-down panel listing all apps. The bar stays exactly one row regardless of how many apps exist. Standard pattern, immediately recognizable to any user.

Pros
  • Always one row, scales to any number of apps
  • Familiar UX — every mobile site uses it
  • Easy to implement
Cons
  • One extra click to navigate
  • Apps are hidden by default
Live demo
ximg.app
← Click ☰ to open the app list
Option 2 Single Scrollable Row Compact

All items in one overflow-x: auto row. The bar never wraps — users scroll horizontally to see more apps. Maximally compact vertically.

Pros
  • Always exactly one row
  • Zero clicks — items visible on scroll
  • Trivial CSS change from current
Cons
  • Poor discoverability — items hidden off-screen
  • Horizontal scroll feels awkward on desktop
Live demo — scroll the nav bar →
Scroll the nav bar above to see all apps
Option 3 Dropdown Groups Organized

Apps are grouped into themes (Games, Tech, Culture, …). A small set of top-level dropdowns replace dozens of individual links. Always one row; the full list is still easily reachable.

Pros
  • Always one row
  • Adds helpful organization/categorization
  • Still feels like traditional navigation
Cons
  • Requires maintaining category taxonomy
  • New apps need a category decision
  • More JS than other options
Live demo — click a category
ximg.app
← Click a category above
Option 4 Hub + Current App Only Minimal

The nav shows only the brand, a link to apps.ximg.app (the directory), and the currently active app. The apps directory becomes the navigation hub. Scales to thousands of apps with zero nav changes.

Pros
  • Always one row, permanently
  • Zero maintenance — nothing to update
  • Clean, focused feel
Cons
  • Two hops to reach another app
  • Relies on apps.ximg.app being excellent
Live demo
ximg.app / all apps / nav
The nav bar above shows only what matters for the current page
Option 5 Searchable Mini-Launcher Scalable

The nav bar contains a search input. Typing filters matching apps in a dropdown — no scrolling, no clicks needed to open a menu. Scales to hundreds of apps and rewards power users who know what they want.

Pros
  • Scales to any number of apps
  • Fast for power users who know names
  • Always one row
Cons
  • Requires knowing app names to navigate
  • Unfamiliar for casual visitors
Live demo — type an app name
ximg.app
Type in the search box above to filter apps