TaskFlow | Design Guide

Navigation Components

Navigation components provide wayfinding and help users understand where they are in the application. Includes main navbar, breadcrumbs, pagination, and mobile navigation patterns.

Components in this section:

Main Navigation Bar Mobile Navigation Breadcrumb Navigation Pagination Controls Sidebar Navigation Tab Navigation

Mobile Navigation

Responsive navigation patterns for mobile devices, including hamburger menus and slide-out panels.

Mobile Header

TaskFlow

Pagination Controls

Pagination components for navigating through large datasets and multi-page content.

Basic Pagination

Compact Pagination

Simple Pagination

Tab Navigation

Horizontal tab navigation for switching between related content sections.

Basic Tabs

Overview Content

This is the content for the Overview tab.

Tabs with Icons

Overview Content

This is the content for the Overview tab with icons.

Pill Tabs

All Tasks

Showing all tasks in the current project.

Usage Guidelines

Navigation Hierarchy

  • Main Navigation: Use for primary application sections (Dashboard, Projects, Tasks)
  • Breadcrumbs: Show hierarchical path and enable quick navigation to parent levels
  • Tabs: Switch between related content sections within the same context
  • Sidebar: Provide secondary navigation and contextual actions
  • Pagination: Navigate through large datasets with clear page indicators

Accessibility Best Practices

  • Use semantic HTML elements: <nav>, <ol>, <ul>
  • Include aria-label or aria-labelledby attributes for navigation landmarks
  • Use aria-current="page" to indicate the current page or section
  • Ensure sufficient color contrast and focus indicators
  • Support keyboard navigation with Tab, Enter, and arrow keys
  • Use role="tablist", role="tab", and role="tabpanel" for tab navigation

Responsive Design

  • Mobile: Use hamburger menu, stack navigation items vertically
  • Tablet: Collapse less important navigation items, show icons with labels
  • Desktop: Show full navigation with text labels and secondary items
  • Breadcrumbs: Truncate long paths with ellipsis on smaller screens
  • Pagination: Show fewer page numbers on mobile, use simplified controls

CSS Classes Reference

Navigation CSS Classes
/* Main Navigation */
.main-nav {
  @apply bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;
}

.nav-link {
  @apply text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white;
  @apply px-3 py-2 rounded-md transition-colors;
}

.nav-link.active {
  @apply text-primary-600 bg-primary-50 dark:bg-primary-900/50 font-medium;
}

/* Breadcrumbs */
.breadcrumb {
  @apply flex items-center space-x-2 text-sm;
}

.breadcrumb-item {
  @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
}

.breadcrumb-separator {
  @apply w-4 h-4 mx-2 text-gray-400;
}

/* Tabs */
.tab-nav {
  @apply -mb-px flex space-x-8 border-b border-gray-200 dark:border-gray-700;
}

.tab-button {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  @apply dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1;
  @apply border-b-2 font-medium text-sm;
}

.tab-button.active {
  @apply border-primary-500 text-primary-600;
}

/* Pagination */
.pagination {
  @apply flex items-center space-x-2;
}

.page-button {
  @apply px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300;
  @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600;
  @apply rounded-md hover:bg-gray-50 dark:hover:bg-gray-700;
}

.page-button.active {
  @apply text-white bg-primary-600 border-primary-600 hover:bg-primary-700;
}

.page-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}