Bottom Taskbar with Persistent Search

By Jay Griffin  ·  January 23, 2026
docs
🏷️ Tags:todouinavigationsearchuxtaskbar

Problem

Currently the navbar is at the top and scrolls away. This hides search AND forces poor ergonomics on mobile.

Current state:

Desired state:

Why This Matters

This isn't a navbar—it's your taskbar. Like Windows Start menu or iOS bottom bar. Your app needs app patterns, not website patterns.

Bottom vs Top: The Ergonomics Case

Mobile: Thumb Zone Wins

Top navbar problems:

Bottom taskbar wins:

The "reachability" mistake: Apple tried to solve top-heavy UI with a swipe gesture to shift screen down. Wrong solution. Just put the controls at the bottom.

Desktop: Taskbar Familiarity

Windows got this right decades ago:

Mac dock is close but:

Browser omnibar is top because:

Result: Find the needle in the hundred-million-webpage haystack in seconds. Billions of people use this pattern daily. It works.

Why Most Site Navigation Fails

Typical site pattern:

.txt
Logo | About | Blog | Projects | Contact | [Search hidden until clicked]

Problems:

  1. Fixed categories don't scale - What if you have 50 pages? 100?
  2. Forced hierarchy - Is "AI Workflow Transparency" a blog post or a project doc?
  3. User has to guess - Which category contains what they want?
  4. Search is hidden - The best navigation tool buried in a menu
  5. Becomes outdated - Add new content types, navbar breaks

This is cargo-culting tradition, not intentional design. Categories made sense before search was good. Now they're friction.

Why Search-First Works for This System

Your content has rich metadata:

This enables smart search:

Your search can be Google-quality because your content is structured. Most site search sucks because content is unstructured text blobs. Yours has semantic relationships and queryable metadata.

App Feel vs Website Feel

Website conventions:

App conventions:

Your site is a full-stack app. No need to pretend it's a website. Use app patterns.

The VS Code Pattern (But Better)

VS Code Command Palette (Cmd+Shift+P) is modal overlay. Great for keyboard users, but:

Your taskbar:

Implementation: Bottom Taskbar

Basic Fixed Bottom Bar

.ts
// New component: src/components/Taskbar.tsx
const StyledTaskbar = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  
  background: \${props => props.theme.colors.background};
  border-top: 1px solid \${props => props.theme.colors.border};
  
  // Frosted glass effect
  backdrop-filter: blur(12px);
  background: \${props => props.theme.colors.background}f5; // 96% opacity
  
  // Mobile safe area (notch/home indicator)
  padding-bottom: env(safe-area-inset-bottom);
  
  // Elevation
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
\`;

Content Padding Adjustment

Body needs bottom padding to prevent content from hiding under taskbar:

.ts
// In GlobalStyles or layout
body {
  padding-bottom: 60px; // Height of taskbar
  
  @media (max-width: 768px) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

Mobile Safe Area

Handle iPhone notch/home indicator:

.ts
// Use env() for safe area insets
padding-bottom: env(safe-area-inset-bottom);

// In viewport meta tag (in layout.tsx head)
viewport: 'width=device-width, initial-scale=1, viewport-fit=cover'

Always Visible (No Auto-Hide)

Unlike some mobile apps that hide bottom bar on scroll, keep it persistent:

Auto-hide is annoying. Don't do it.

Z-Index Layering

Ensure navbar stays above content but below modals:

.ts
// Z-index scale
const zIndex = {
  base: 1,
  nav: 100,
  dropdown: 200,
  modal: 1000,
  tooltip: 2000,
};

Taskbar Layout

.ts
<Taskbar>
  <SearchBar 
    placeholder="Search or type command..." 
    onFocus={handleSearchFocus}
  />
  <QuickActions>
    <IconButton aria-label="New content">+</IconButton>
    <IconButton aria-label="Theme toggle">🌙</IconButton>
    <IconButton aria-label="Settings">⚙️</IconButton>
  </QuickActions>
</Taskbar>

Mobile: Search takes most space, icons minimal Desktop: More room for labeled actions

Search Improvements (Related)

Making navbar sticky is only valuable if search is actually good. Related improvements:

1. Keyboard Shortcut

Add Cmd+K (or /) to focus search from anywhere:

.ts
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      searchInputRef.current?.focus();
    }
  };
  
  document.addEventListener('keydown', handleKeyDown);
  return () => document.removeEventListener('keydown', handleKeyDown);
}, []);

2. Autocomplete Dropdown

Show results as you type (like browser URL bar):

.ts
// Show top 5-10 results in dropdown below search input
const searchResults = posts
  .filter(p => matchesSearch(p, query))
  .slice(0, 10);

3. Smart Filtering

Parse search queries for special syntax:

4. Search History

Store recent searches in localStorage, show as suggestions:

.ts
const recentSearches = JSON.parse(
  localStorage.getItem('recentSearches') || '[]'
);

5. Quick Actions

Beyond navigation, search could trigger actions:

This transforms search from navigation to command palette.

What Happened to Top Navbar?

Top navbar becomes minimal header:

All navigation moves to bottom taskbar:

Why Taskbar > Traditional Navbar

Traditional navbar:

.txt
Logo | About | Blog | Projects | Contact | Services | Portfolio

7 items competing for attention. User has to:

  1. Read all options
  2. Decide which category
  3. Click
  4. Hope they guessed right

Bottom taskbar:

.txt
[                Search                 ] + ⚙️

One action. User:

  1. Types what they want
  2. Gets it

Time to content:

Scalability:

Maintenance:

Accessibility:

Examples of Good Bottom Bar UI

Mobile apps that got it right:

Desktop apps:

Web apps:

What they all recognize: Bottom = most accessible. Top = legacy.

Files to Modify

  1. NEW: src/components/Taskbar.tsx

    • Fixed bottom bar component
    • Search input + quick actions
    • Mobile safe area handling
    • Frosted glass effect

  2. src/components/NavBar.tsx

    • Simplify to minimal header (logo + page title)
    • Remove navigation links
    • Keep theme toggle (or move to taskbar)

  3. src/components/Navigator.tsx → Extract SearchBar

    • Extract search logic to reusable component
    • Add keyboard shortcut (Cmd+K or /)
    • Improve metadata-based search
    • Add autocomplete dropdown

  4. src/app/layout.tsx

    • Add Taskbar component at bottom
    • Add viewport-fit=cover for mobile safe area

  5. src/styles/GlobalStyles.tsx

    • Add bottom padding to body (taskbar height)
    • Handle mobile safe area insets
    • Z-index scale for taskbar

Timeline

Now (1 hour):

Soon (2 hours):

Later (2-3 hours):

Why This Is High Priority

Bottom taskbar + good search = fastest path to any content. This is the UX foundation for everything else:

Make navigation frictionless and ergonomic, everything else becomes more valuable.

The Windows Taskbar Dream

Would genuinely pay for Windows taskbar on macOS:

Windows nailed the pattern, just failed execution (search is terrible, bloated with ads/news). macOS Dock is close but has no search (Spotlight is modal, not integrated).

Your taskbar can be what Windows taskbar should have been: Always accessible, actually good search, persistent command palette, clean execution.

tl;dr: Bottom taskbar beats top navbar. Mobile thumb zone, desktop familiarity, app feel. Windows/modern iOS were right about position, just failed at search quality. Your structured metadata makes search actually work. Build the taskbar both OSes should have shipped.